セクション&セクションコラム

SectionおよびSectionColumnコンポーネントは、フォームフィールドやコンテンツを整理するためのレスポンシブな多列レイアウトを提供します。列は水平に配置され、利用可能な幅が制限されると自動的に次の行に巻き付きます。

React

Blazor

柱

Sectionの中に1つ以上のSectionColumn部品を配置します。列は利用可能な幅に均等に分布しています。ColumnCountを使って列数(1〜4)を明示的に設定します。省略すると、SectionColumn子の数がデフォルトになります。

React

Blazor

列の最小幅

SectionのColumnMinWidthを設定して、列が次の行に巻き替わるタイミングを制御します。1列あたりの利用可能な幅がこの閾値を下回ると、列は縦に積み重なります。デフォルトは340pxです。

React

Blazor

列幅

SectionColumnに付けてWidthを使い、列のシェアを大きくしたり小さくしたりします。幅はCSSパーセンテージではなく比率です。3列に3列、Width="3"、Width="4"、Width="3"30%(3 + 4 + 3 = 10)で配置されます。Widthのない列はデフォルトの等分分布に戻されます。

React

Blazor

ヘッダーとフッター

SectionもSectionColumnもHeaderText/HeaderおよびFooterText/Footerパラメータをサポートしています。簡単なテキスト見出しにはHeaderTextを、カスタムの断片をレンダリングするにはHeaderを使いましょう。

React

Blazor

国境

SectionやSectionColumnにBorderVisible="true"を設定して、その周囲に枠を表示させてください。境界線は断面と各列で独立して設定できます。

React

Blazor

内容指向

デフォルトでは、 SectionColumn 内のエディタコンポーネントは縦に積み重ねられています。 ColumnContentOrientation="ComponentOrientation.Horizontal" を水平に配置するように設定してください。 HorizontalGap と VerticalGap を使ってアイテム間の間隔をコントロールしましょう。

React

Blazor

例

4列のリアクションでラップする Section 。

Reactの例

ブレイザーの例

React TypeScript

Razor

第1列

第2列

第3列

第4列

列幅の例

以下の Width 値を調整して、各列の行割合を変更します。幅は比率であり、列のレンダリングパーセンテージはその値を3つの合計で割ったものです。

Reactの例

ブレイザーの例

React TypeScript

Razor

第1列

第2列

第3列

最小幅(px)

30%

40%

30%

設定オプション

以下のコントロールを使って、 Section と SectionColumnの両方の境界線、ヘッダー、フッターを探索できます。

Reactの例

ブレイザーの例

React TypeScript

Razor

セクションの境界線は見えますか?

セクションヘッダー

セクションフッター

セクションの列の枠が見えますか?

セクションカラムヘッダー

セクションの柱フッター

第1列

第2列

第3列

第4列

反応してください

ブレイザー

Section クラス

パラメータ

名称	種類	デフォルト	概要
`BorderVisible`	bool	False	境界線は表示すべきでしょうか?
`ChildContent`	RenderFragment?		セクションの内容。
`ChildContentStyle`	string?		スタイルを子コンテンツのコンテナに適用します。
`ColumnCount`	int?		必要に応じて、セクションに希望する列数を指定することもできます。デフォルトはコンポーネントの子コンテンツに含まれる実際の `Layout.SectionColumn`数で計算されます。
`ColumnMinWidth`	string?	340px	柱が占める最小幅。
`Footer`	RenderFragment?		セクションのフッターを表示する。
`FooterStyle`	string?		フッターに適用するスタイル。
`FooterText`	string?		フッターとして表示するテキスト。供給 `Section.Footer` 表示されません。
`Header`	RenderFragment?		セクションのヘッダーコンテンツを表示する。
`HeaderStyle`	string?		スタイルをヘッダーに適用してください。
`HeaderText`	string?		ヘッダーとして表示するテキスト。供給 `Section.Header` 表示されません。

名称: BorderVisible

種類: bool

デフォルト: False

概要: 境界線は表示すべきでしょうか?

名称: ChildContent

種類: RenderFragment?

概要: セクションの内容。

名称: ChildContentStyle

種類: string?

概要: スタイルを子コンテンツのコンテナに適用します。

名称: ColumnCount

種類: int?

概要: 必要に応じて、セクションに希望する列数を指定することもできます。デフォルトはコンポーネントの子コンテンツに含まれる実際の Layout.SectionColumn数で計算されます。

名称: ColumnMinWidth

種類: string?

デフォルト: 340px

概要: 柱が占める最小幅。

名称: Footer

種類: RenderFragment?

概要: セクションのフッターを表示する。

名称: FooterStyle

種類: string?

概要: フッターに適用するスタイル。

名称: FooterText

種類: string?

概要: フッターとして表示するテキスト。供給 Section.Footer 表示されません。

名称: Header

種類: RenderFragment?

概要: セクションのヘッダーコンテンツを表示する。

名称: HeaderStyle

種類: string?

概要: スタイルをヘッダーに適用してください。

名称: HeaderText

種類: string?

概要: ヘッダーとして表示するテキスト。供給 Section.Header 表示されません。

反応してください

ブレイザー

SectionColumn クラス

パラメータ

名称	種類	デフォルト	概要
`BorderVisible`	bool	True	境界線は見えますか?
`ChildContent`	RenderFragment?		セクション欄の子コンテンツ
`ColumnContentOrientation`	ComponentOrientation	Vertical	柱の向き。
`Footer`	RenderFragment?		セクションのフッターを表示する。
`FooterText`	string?		フッターとして表示するテキスト。供給 `SectionColumn.Footer` 表示されません。
`Header`	RenderFragment?		セクションのヘッダーコンテンツを表示する。
`HeaderText`	string?		ヘッダーとして表示するテキスト。供給 `SectionColumn.Header` 表示されません。
`HorizontalGap`	int?	10	ピクセルの水平ギャップ。
`VerticalGap`	int?	10	ピクセルの垂直ギャップ。
`Width`	double?		この列の相対幅は重みで表されます。幅は横の比率として扱われますセクション内のすべての列、つまり Width='3'、 Width='4'の3列、幅=「3」、30%、30%(3+4+3=10パーツ)としてレイアウトします。 null を残すと列はセクションの均等分布デフォルトを使用しています。

名称: BorderVisible

種類: bool

デフォルト: True

概要: 境界線は見えますか?

名称: ChildContent

種類: RenderFragment?

概要: セクション欄の子コンテンツ

名称: ColumnContentOrientation

種類: ComponentOrientation

デフォルト: Vertical

概要: 柱の向き。

名称: Footer

種類: RenderFragment?

概要: セクションのフッターを表示する。

名称: FooterText

種類: string?

概要: フッターとして表示するテキスト。供給 SectionColumn.Footer 表示されません。

名称: Header

種類: RenderFragment?

概要: セクションのヘッダーコンテンツを表示する。

名称: HeaderText

種類: string?

概要: ヘッダーとして表示するテキスト。供給 SectionColumn.Header 表示されません。

名称: HorizontalGap

種類: int?

デフォルト: 10

概要: ピクセルの水平ギャップ。

名称: VerticalGap

種類: int?

デフォルト: 10

概要: ピクセルの垂直ギャップ。

名称: Width

種類: double?

概要: この列の相対幅は重みで表されます。幅は横の比率として扱われますセクション内のすべての列、つまり Width='3'、 Width='4'の3列、幅=「3」、30%、30%(3+4+3=10パーツ)としてレイアウトします。 null を残すと列はセクションの均等分布デフォルトを使用しています。