@page "/components/list"
<PageLayout Title="List 列表" Description="列表用一个连续的列来显示多行元素，常用于具有相同构成及内容的模块批量展示，可承载多样化的信息内容，从纯文字到复杂的图文组合。"
    Anchors="@(new[]{"示例","基础文字列表","多行文字列表","多行文字列表","带分隔线的列表","带间隔色的列表","基础图文列表","带头部及尾部的列表","带滚动事件的列表","具备加载行为的内容"})">
    <ChildContent>

<Example Title="示例" RunStyle="@Code.BgRun">
    <Description></Description>
    <RunContent>
        <TList>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
        </TList>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TList>
    <TListItem>列表内容的描述性文字</TListItem>
    <TListItem>列表内容的描述性文字</TListItem>
    <TListItem>列表内容的描述性文字</TListItem>
</TList>
```
")
    </CodeContent>
</Example>
<Example Title="基础文字列表" RunStyle="@Code.BgRun">
    <Description>仅包含简单文字的列表。对较简单的信息进行陈列时使用。</Description>
    <RunContent>
        <TList>
            <TListItem>
                <ChildContent>列表内容的描述性文字</ChildContent>
                <OperationContent>
                    <TSpace>
                        <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                        <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                        <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                    </TSpace>
                </OperationContent>
            </TListItem>
            <TListItem>
                <ChildContent>列表内容的描述性文字</ChildContent>
                <OperationContent>
                    <TSpace>
                        <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                        <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                        <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                    </TSpace>
                </OperationContent>
            </TListItem>
            <TListItem>
                <ChildContent>列表内容的描述性文字</ChildContent>
                <OperationContent>
                    <TSpace>
                        <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                        <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                        <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                    </TSpace>
                </OperationContent>
            </TListItem>
        </TList>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TList>
    <TListItem>
        <ChildContent>列表内容的描述性文字</ChildContent>
        <OperationContent>
            <TSpace>
                <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                <TSpaceItem><TButton>操作</TButton></TSpaceItem>
            </TSpace>
        </OperationContent>
    </TListItem>
    <TListItem>
        <ChildContent>列表内容的描述性文字</ChildContent>
        <OperationContent>
            <TSpace>
                <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                <TSpaceItem><TButton>操作</TButton></TSpaceItem>
            </TSpace>
        </OperationContent>
    </TListItem>
    <TListItem>
        <ChildContent>列表内容的描述性文字</ChildContent>
        <OperationContent>
            <TSpace>
                <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                <TSpaceItem><TButton>操作</TButton></TSpaceItem>
                <TSpaceItem><TButton>操作</TButton></TSpaceItem>
            </TSpace>
        </OperationContent>
    </TListItem>
</TList>
```
")
    </CodeContent>
</Example>
<Example Title="多行文字列表" RunStyle="@Code.BgRun">
    <Description>仅包含主要文字及描述性文字的列表。对较复杂的，包含多个字段或内容的信息进行展示时使用。</Description>
    <RunContent>
        <TList>
            <TListItem>
                <TitleContent>这里是标题</TitleContent>
                <ChildContent>这里是文字描述</ChildContent>
            </TListItem>
            <TListItem>
                <TitleContent>这里是标题</TitleContent>
                <ChildContent>这里是文字描述</ChildContent>
            </TListItem>
            <TListItem>
                <TitleContent>这里是标题</TitleContent>
                <ChildContent>这里是文字描述</ChildContent>
            </TListItem>
        </TList>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TList>
    <TListItem>
        <TitleContent>这里是标题</TitleContent>
        <ChildContent>这里是文字描述</ChildContent>
    </TListItem>
    <TListItem>
        <TitleContent>这里是标题</TitleContent>
        <ChildContent>这里是文字描述</ChildContent>
    </TListItem>
    <TListItem>
        <TitleContent>这里是标题</TitleContent>
        <ChildContent>这里是文字描述</ChildContent>
    </TListItem>
</TList>
```
")
    </CodeContent>
</Example>
<Example Title="带分隔线的列表" RunStyle="@Code.BgRun">
    <Description>设置 <code>Split</code> 使列表项之间有分割线</Description>
    <RunContent>
        <TList Split>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
        </TList>
    </RunContent>
    <CodeContent>
@Code.Create(@"
```cshtml-razor
<TList Split>
    <TListItem>列表内容的描述性文字</TListItem>
    <TListItem>列表内容的描述性文字</TListItem>
    <TListItem>列表内容的描述性文字</TListItem>
</TList>
```
")
    </CodeContent>
</Example>
<Example Title="带间隔色的列表" RunStyle="@Code.BgRun">
    <Description>设置 <code>Stripe</code> 使列表项之间有间隔色</Description>
    <RunContent>
        <TList Stripe>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
        </TList>
    </RunContent>
    <CodeContent>
@Code.Create(@"
```cshtml-razor
<TList Stripe>
    <TListItem>列表内容的描述性文字</TListItem>
    <TListItem>列表内容的描述性文字</TListItem>
    <TListItem>列表内容的描述性文字</TListItem>
    <TListItem>列表内容的描述性文字</TListItem>
</TList>
```
")
    </CodeContent>
</Example>
<Example Title="基础图文列表" RunStyle="@Code.BgRun">
    <Description>包含简单图文的列表。需使用图片和文字结合展示信息。</Description>
    <RunContent>
        <TList>
            <TListItem>
                <AvatarContent>
                    <img src="/img/avatar.jpg"/>
                </AvatarContent>
                <TitleContent>这里是标题</TitleContent>
                <ChildContent>这里是文字描述</ChildContent>
            </TListItem>
            <TListItem>
                <AvatarContent>
                    <img src="/img/avatar.jpg" />
                </AvatarContent>
                <TitleContent>这里是标题</TitleContent>
                <ChildContent>这里是文字描述</ChildContent>
            </TListItem>
            <TListItem>
                <AvatarContent>
                    <img src="/img/avatar.jpg" />
                </AvatarContent>
                <TitleContent>这里是标题</TitleContent>
                <ChildContent>这里是文字描述</ChildContent>
            </TListItem>
        </TList>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TList>
    <TListItem>
        <AvatarContent><img src=""/img/avatar.jpg""/></AvatarContent>
        <TitleContent>这里是标题</TitleContent>
        <ChildContent>这里是文字描述</ChildContent>
    </TListItem>
    <TListItem>
        <AvatarContent><img src=""/img/avatar.jpg""/></AvatarContent>
        <TitleContent>这里是标题</TitleContent>
        <ChildContent>这里是文字描述</ChildContent>
    </TListItem>
    <TListItem>
        <AvatarContent><img src=""/img/avatar.jpg""/></AvatarContent>
        <TitleContent>这里是标题</TitleContent>
        <ChildContent>这里是文字描述</ChildContent>
    </TListItem>
</TList>
```
")
    </CodeContent>
</Example>
<Example Title="带头部及尾部的列表" RunStyle="@Code.BgRun">
    <Description>当列表需要展示头部或尾部信息时，配置 <code>HeaderContent</code> 和 <code>FooterContent</code> 的内容，并显示地使用 <code>ChildContent</code> 设置列表项。</Description>
    <RunContent>
        <TList>
            <HeaderContent>这里是头部内容</HeaderContent>
            <FooterContent>这里是底部内容</FooterContent>
            <ChildContent>
                <TListItem>
                    <AvatarContent>
                        <img src="/img/avatar.jpg" />
                    </AvatarContent>
                    <TitleContent>这里是标题</TitleContent>
                    <ChildContent>这里是文字描述</ChildContent>
                </TListItem>
                <TListItem>
                    <AvatarContent>
                        <img src="/img/avatar.jpg" />
                    </AvatarContent>
                    <TitleContent>这里是标题</TitleContent>
                    <ChildContent>这里是文字描述</ChildContent>
                </TListItem>
                <TListItem>
                    <AvatarContent>
                        <img src="/img/avatar.jpg" />
                    </AvatarContent>
                    <TitleContent>这里是标题</TitleContent>
                    <ChildContent>这里是文字描述</ChildContent>
                </TListItem>
            </ChildContent>
        </TList>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TList>
    <HeaderContent>这里是头部内容</HeaderContent>
    <FooterContent>这里是底部内容</FooterContent>
    <ChildContent>
        <TListItem>
            <AvatarContent><img src=""/img/avatar.jpg""/></AvatarContent>
            <TitleContent>这里是标题</TitleContent>
            <ChildContent>这里是文字描述</ChildContent>
        </TListItem>
        <TListItem>
            <AvatarContent><img src=""/img/avatar.jpg""/></AvatarContent>
            <TitleContent>这里是标题</TitleContent>
            <ChildContent>这里是文字描述</ChildContent>
        </TListItem>
        <TListItem>
            <AvatarContent><img src=""/img/avatar.jpg""/></AvatarContent>
            <TitleContent>这里是标题</TitleContent>
            <ChildContent>这里是文字描述</ChildContent>
        </TListItem>
    </ChildContent>
</TList>
```
")
    </CodeContent>
</Example>
<Example Title="带滚动事件的列表" RunStyle="@Code.BgRun">
    <Description>设置 <code>Height</code> 固定列表的高度(px)，超过高度自动带滚动条。</Description>
    <RunContent>
        <TList Height="150">
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
            <TListItem>列表内容的描述性文字</TListItem>
        </TList>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TList Height=""150"">
    <TListItem>列表内容的描述性文字</TListItem>
    <TListItem>列表内容的描述性文字</TListItem>
    <TListItem>列表内容的描述性文字</TListItem>
    ...
</TList>
```
")
    </CodeContent>
</Example>
<Example Title="具备加载行为的内容" RunStyle="@Code.BgRun">
    <Description>设置 <code>LoadingContent</code> 自定义加载行为的内容。</Description>
    <RunContent>
        <TList>
            <LoadingContent>
                <TLink Theme="Theme.Primary">点击加载列表</TLink>
            </LoadingContent>
            <ChildContent>
                <TListItem>列表内容的描述性文字</TListItem>
                <TListItem>列表内容的描述性文字</TListItem>
                <TListItem>列表内容的描述性文字</TListItem>
                <TListItem>列表内容的描述性文字</TListItem>
                <TListItem>列表内容的描述性文字</TListItem>
                <TListItem>列表内容的描述性文字</TListItem>
            </ChildContent>
        </TList>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TList>
    <LoadingContent>
        <TLink Theme=""Theme.Primary"">点击加载列表</TLink>
    </LoadingContent>
    <ChildContent>
        <TListItem>列表内容的描述性文字</TListItem>
        <TListItem>列表内容的描述性文字</TListItem>
        <TListItem>列表内容的描述性文字</TListItem>
        <TListItem>列表内容的描述性文字</TListItem>
        <TListItem>列表内容的描述性文字</TListItem>
        <TListItem>列表内容的描述性文字</TListItem>
    </ChildContent>
</TList>
```
")
    </CodeContent>
    </Example>
    </ChildContent>
    <ApiContent>
        <ApiDocument ComponentType="typeof(TList)" />
        <ApiDocument ComponentType="typeof(TListItem)" />
    </ApiContent>
</PageLayout>