@page "/components/layout"
<PageLayout Title="Layout 布局" Description="用于组织网页的框架结构。" ComponentType="typeof(TLayout)"
    Anchors="@(new[]{"基本用法"})">

<Example Title="基本用法">
    <Description>
        组件 <code>TLayout</code> 作为布局容器，可包裹 <code>HeaderContent</code>、<code>LeftSideContent</code>、<code>RightSideContent</code> 和 <code>FooterContent</code> 内容部分。
    </Description>
    <RunContent>
        <div class="tdesign-demo-item--layout">
            <div>
                <TLayout>
                    <HeaderContent>顶部</HeaderContent>
                    <ChildContent>内容部分</ChildContent>
                    <FooterContent>底部</FooterContent>
                </TLayout>
            </div>
            <div>
                <TLayout>
                    <HeaderContent>顶部</HeaderContent>
                    <LeftSideContent>左部</LeftSideContent>
                    <ChildContent>内容部分</ChildContent>
                    <FooterContent>底部</FooterContent>
                </TLayout>
            </div>
            <div>
                <TLayout>
                    <HeaderContent>顶部</HeaderContent>
                    <RightSideContent>左部</RightSideContent>
                    <ChildContent>内容部分</ChildContent>
                    <FooterContent>底部</FooterContent>
                </TLayout>
            </div>
        </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TLayout>
    <HeaderContent>顶部</HeaderContent>
    <ChildContent>内容部分</ChildContent>
    <FooterContent>底部</FooterContent>
</TLayout>

<TLayout>
    <HeaderContent>顶部</HeaderContent>
    <LeftSideContent>左部</LeftSideContent>
    <ChildContent>内容部分</ChildContent>
    <FooterContent>底部</FooterContent>
</TLayout>

<TLayout>
    <HeaderContent>顶部</HeaderContent>
    <RightSideContent>左部</RightSideContent>
    <ChildContent>内容部分</ChildContent>
    <FooterContent>底部</FooterContent>
</TLayout>
```
")
    </CodeContent>
</Example>
</PageLayout>