components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.description
<Section>
<SectionColumn headerText="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-overview-contact-header">
<TextEdit columnName="firstname" />
<TextEdit columnName="lastname" />
</SectionColumn>
<SectionColumn headerText="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-overview-account-header">
<TextEdit columnName="name" />
</SectionColumn>
</Section><Section>
<SectionColumn HeaderText="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-overview-contact-header">
<TextEdit ColumnName="firstname" />
<TextEdit ColumnName="lastname" />
</SectionColumn>
<SectionColumn HeaderText="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-overview-account-header">
<TextEdit ColumnName="name" />
</SectionColumn>
</Section>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.columns-description
{/* components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-columns-explicit-comment */}
<Section columnCount={3}>
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-columns-c1</SectionColumn>
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-columns-c2</SectionColumn>
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-columns-c3</SectionColumn>
</Section><!-- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-columns-explicit-comment -->
<Section ColumnCount="3">
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-columns-c1</SectionColumn>
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-columns-c2</SectionColumn>
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-columns-c3</SectionColumn>
</Section>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.column-min-width-description
<Section columnMinWidth="200px">
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-min-narrow-1</SectionColumn>
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-min-narrow-2</SectionColumn>
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-min-narrow-3</SectionColumn>
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-min-narrow-4</SectionColumn>
</Section><Section ColumnMinWidth="200px">
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-min-narrow-1</SectionColumn>
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-min-narrow-2</SectionColumn>
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-min-narrow-3</SectionColumn>
<SectionColumn>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-min-narrow-4</SectionColumn>
</Section>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.column-widths-description
{/* components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-widths-ratio-comment */}
<Section>
<SectionColumn width={3}>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-widths-c1</SectionColumn>
<SectionColumn width={4}>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-widths-c2</SectionColumn>
<SectionColumn width={3}>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-widths-c3</SectionColumn>
</Section><!-- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-widths-ratio-comment -->
<Section>
<SectionColumn Width="3">components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-widths-c1</SectionColumn>
<SectionColumn Width="4">components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-widths-c2</SectionColumn>
<SectionColumn Width="3">components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-widths-c3</SectionColumn>
</Section>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.headers-footers-description
<Section headerText="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-headers-section-header" footerText="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-headers-section-footer">
<SectionColumn headerText="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-headers-general">
<TextEdit columnName="name" />
</SectionColumn>
<SectionColumn headerText="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-headers-address">
<TextEdit columnName="address1_city" />
</SectionColumn>
</Section><Section HeaderText="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-headers-section-header" FooterText="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-headers-section-footer">
<SectionColumn HeaderText="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-headers-general">
<TextEdit ColumnName="name" />
</SectionColumn>
<SectionColumn HeaderText="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-headers-address">
<TextEdit ColumnName="address1_city" />
</SectionColumn>
</Section>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.borders-description
<Section borderVisible>
<SectionColumn borderVisible>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-borders-bordered</SectionColumn>
<SectionColumn borderVisible={false}>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-borders-no-border</SectionColumn>
</Section><Section BorderVisible="true">
<SectionColumn BorderVisible="true">
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-borders-bordered
</SectionColumn>
<SectionColumn BorderVisible="false">
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.snippet-borders-no-border
</SectionColumn>
</Section>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.orientation-description
import { SectionColumnOrientation } from '@powerportalspro/react-fluent';
<Section>
<SectionColumn
columnContentOrientation={SectionColumnOrientation.Horizontal}
horizontalGap={20}
verticalGap={10}
>
<TextEdit columnName="firstname" />
<TextEdit columnName="lastname" />
</SectionColumn>
</Section><Section>
<SectionColumn ColumnContentOrientation="ComponentOrientation.Horizontal"
HorizontalGap="20"
VerticalGap="10">
<TextEdit ColumnName="firstname" />
<TextEdit ColumnName="lastname" />
</SectionColumn>
</Section>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.main-demo-description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.column-widths-demo-description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.Section.SectionDemoPage.properties-demo-description
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.description |
|---|---|---|---|
BorderVisible | bool | False | |
ChildContent | RenderFragment? | ||
ChildContentStyle | string? | ||
ColumnCount | int? | ||
ColumnMinWidth | string? | 340px | |
Footer | RenderFragment? | ||
FooterStyle | string? | ||
FooterText | string? | ||
Header | RenderFragment? | ||
HeaderStyle | string? | ||
HeaderText | string? |
BorderVisibleChildContentChildContentStyleColumnCountColumnMinWidthFooterFooterStyleFooterTextHeaderHeaderStyleHeaderTextcomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.description |
|---|---|---|---|
BorderVisible | bool | True | |
ChildContent | RenderFragment? | ||
ColumnContentOrientation | ComponentOrientation | Vertical | |
Footer | RenderFragment? | ||
FooterText | string? | ||
Header | RenderFragment? | ||
HeaderText | string? | ||
HorizontalGap | int? | 10 | |
VerticalGap | int? | 10 | |
Width | double? |
BorderVisibleChildContentColumnContentOrientationFooterFooterTextHeaderHeaderTextHorizontalGapVerticalGapWidth