components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.areas-description
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-overview-react-comment-line1
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-overview-react-comment-line2
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-overview-react-comment-line3
<PageLayout
header={
<>
<SaveContextButton />
<RefreshContextButton />
</>
}
navigation={/* components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-overview-side-nav-jsx-comment */}
body={/* components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-overview-main-page-jsx-comment */}
footer={<span>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-overview-copyright</span>}
/><PageLayout>
<Header>
<MenuBar>
<SaveContextButton />
<RefreshContextButton />
</MenuBar>
</Header>
<Navigation>
<!-- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-overview-side-nav-comment -->
</Navigation>
<Body>
<!-- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-overview-main-page-comment -->
</Body>
<Footer>
<FluentLabel>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-overview-copyright</FluentLabel>
</Footer>
</PageLayout>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.visibility-description
<PageLayout
headerVisible
navigationVisible={false}
footerVisible
header="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-visibility-page-title"
body="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-visibility-content-no-nav"
footer="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-visibility-footer"
/><PageLayout HeaderVisible="true"
NavigationVisible="false"
FooterVisible="true">
<Header>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-visibility-page-title</Header>
<Body>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-visibility-content-no-nav</Body>
<Footer>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-visibility-footer</Footer>
</PageLayout>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.styling-description
<PageLayout
className="my-page"
style={{ minHeight: '100vh' }}
headerClassName="my-header"
headerStyle={{ backgroundColor: 'var(--colorNeutralBackground5)' }}
bodyClassName="my-body"
bodyStyle={{ padding: '2rem' }}
header="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-styling-styled-header"
body="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-styling-styled-body"
/><PageLayout HeaderClass="my-header"
HeaderStyle="background-color: var(--neutral-layer-4);"
BodyClass="my-body"
BodyStyle="padding: 2rem;"
Class="my-page"
Style="min-height: 100vh;">
<Header>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-styling-styled-header</Header>
<Body>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-styling-styled-body</Body>
</PageLayout>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.nesting-description
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-nesting-react-comment-line1
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-nesting-react-comment-line2
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-nesting-react-comment-line3
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-nesting-react-comment-line4
<PageLayout
header="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-nesting-main-header"
body={
<PageLayout
header={<SaveContextButton />}
body={/* components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-nesting-sub-page-jsx-comment */}
/>
}
/><PageLayout>
<Header>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-nesting-main-header</Header>
<Body>
<PageLayout>
<Header>
<MenuBar>
<SaveContextButton />
</MenuBar>
</Header>
<Body>
<!-- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.snippet-nesting-sub-page-razor-comment -->
</Body>
</PageLayout>
</Body>
</PageLayout>components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.scroll-description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.main-demo-description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Layout.PageLayout.PageLayoutDemoPage.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 |
|---|---|---|---|
Body | RenderFragment? | ||
BodyClass | string? | ||
BodyStyle | string? | ||
DefaultNavigationWidth | int | 280 | |
EnableNavigationResizing | bool | True | |
Footer | RenderFragment? | ||
FooterClass | string? | ||
FooterStyle | string? | ||
FooterVisible | bool | True | |
Header | RenderFragment? | ||
HeaderClass | string? | ||
HeaderStyle | string? | ||
HeaderVisible | bool | True | |
MaxNavigationWidth | int | 480 | |
MinNavigationWidth | int | 200 | |
Navigation | RenderFragment? | ||
NavigationClass | string? | ||
NavigationResizeHandleLabel | string | Resize navigation | |
NavigationResizeStorageKey | string | ppp-page-layout-nav-width | |
NavigationStyle | string? | ||
NavigationVisible | bool | True | |
PersistNavigationWidth | bool | True | |
ValidationSummaryVisible | bool | True |
BodyBodyClassBodyStyleDefaultNavigationWidthEnableNavigationResizingFooterFooterClassFooterStyleFooterVisibleHeaderHeaderClassHeaderStyleHeaderVisibleMaxNavigationWidthMinNavigationWidthNavigationNavigationClassNavigationResizeHandleLabelNavigationResizeStorageKeyNavigationStyleNavigationVisiblePersistNavigationWidthValidationSummaryVisible