Layout component

The <Layout> is used to handling the overall layout of a page.

  • <Layout> The main layout container
    • <LayoutHeader> The top container for a Bar or navigation
    • <LayoutContent> The main content container
    • <LayoutFooter> The bottom layout
    • <LayoutSider> The sidebar container
      • <LayoutSiderContent> Main content for sider component

Examples

Basic

Header
Content
Footer
<Layout>
    <LayoutHeader>
        Header
    </LayoutHeader>
    <LayoutContent>
        Content
    </LayoutContent>
    <LayoutFooter>
        Footer
    </LayoutFooter>
</Layout>

With Sider

Header
Content
<Layout Sider="true">
    <LayoutSider>
        <LayoutSiderContent>
            Sider
        </LayoutSiderContent>
    </LayoutSider>
    <Layout>
        <LayoutHeader Fixed="true">
            Header
        </LayoutHeader>
        <LayoutContent>
            Content
        </LayoutContent>
    </Layout>
</Layout>

Sider with Header on top

Header
Content
<Layout>
    <LayoutHeader Fixed="true">
        Header
    </LayoutHeader>
    <Layout Sider="true">
        <LayoutSider>
            <LayoutSiderContent>
                Sider
            </LayoutSiderContent>
        </LayoutSider>
        <Layout>
            <LayoutContent>
                Content
            </LayoutContent>
        </Layout>
    </Layout>
</Layout>

Attributes

Layout

Name Description Type Default
Sider Indicates that layout will contain sider. bool false
Loading If true, an overlay will be created so the user cannot click anything until set to false. bool false

LayoutHeader

Name Description Type Default
Fixed If true header will be fixed to the top of the page. bool false

LayoutFooter

Name Description Type Default
Fixed If true footer will be fixed to the bottom of the page. bool false