@page "/components/divider"
<PageLayout Title="Divider 分割线" Description="分割线是一个呈线状的轻量化组件，起到分割、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。"
    Anchors="@(new[]{"水平分割线","垂直分割线","带文字的分割线","文字对齐方式","虚线"})" ComponentType="typeof(TDivider)">

<Example Title="水平分割线">
    <Description>水平分割线常用来对不同元素内容进行分割。</Description>
    <RunContent>
        <p>这是第一种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。</p>
        <TDivider/>
        <p>这是第二种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。

</p>
<TDivider/>
<p>这是第三种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。</p>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
...
<TDivider />
...
<TDivider />
...
```
")
    </CodeContent>
</Example>
<Example Title="垂直分割线">
    <Description>垂直分割线常用来做行内分割。</Description>
    <RunContent>
        正直 <TDivider Vertical /> 进取 <TDivider Vertical /> xxxx <TDivider Vertical /> 创新 <TDivider Vertical /> 共赢
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
正直 <TDivider Vertical /> 进取 <TDivider Vertical /> xxxx <TDivider Vertical /> 创新 <TDivider Vertical /> 共赢
```
")
    </CodeContent>
</Example>
<Example Title="带文字的分割线">
    <Description>带文字的分割线是在分割线中嵌入文字，在需要对分割内容进行解释说明时使用。</Description>
    <RunContent>
                <p>这是第一种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。</p>
        <TDivider>Blazor TDesign</TDivider>
        <p>这是第二种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。

</p>
<TDivider>Blazor TDesign</TDivider>
<p>这是第三种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。</p>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
...
<TDivider>显示的文字</TDivider>
...
```
")
    </CodeContent>
</Example>
<Example Title="文字对齐方式">
    <Description>可以让文字拥有左、中（默认）、右三种对齐方式。</Description>
    <RunContent>
        <p>这是第一种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。</p>
        <TDivider Alignment="HorizontalAlignment.Left">Blazor TDesign</TDivider>
        <p>这是第二种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。

</p>
<TDivider>Blazor TDesign</TDivider>
<p>这是第三种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。</p>
<TDivider Alignment="HorizontalAlignment.Right">Blazor TDesign</TDivider>
    </RunContent>
    <CodeContent>
@Code.Create(@"
```cshtml-razor
<TDivider Alignment=""HorizontalAlignment.Left"">左对齐</TDivider>
<TDivider Alignment=""HorizontalAlignment.Center"">居中对齐</TDivider>
<TDivider Alignment=""HorizontalAlignment.Right"">右对齐</TDivider>
```
")
</CodeContent>
</Example>
<Example Title="虚线">
    <Description></Description>
    <RunContent>
        <TDivider Dashed/>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TDivider Dashed/>
```
")
    </CodeContent>
    </Example>
</PageLayout>