Skip to content

Divider 分割线

分割线用于分隔不同内容区块,可纯线条展示或带居中文字。

基础用法

纯分割线使用 <hr> 元素渲染,带有 hr 类名。

vue

<TDivider/>

文字分割线

通过 text prop 传入文字,或使用默认插槽自定义内容。

vue

<TDivider text="分割线文字"/>

文字位置

通过 position 属性控制文字对齐位置:start(左)、center(中,默认)、end(右)。

vue

<TDivider text="左对齐" position="start"/>
<TDivider text="居中对齐" position="center"/>
<TDivider text="右对齐" position="end"/>

颜色

通过 color 属性设置文字颜色,支持所有 Tabler 预设颜色。

vue

<TDivider text="主色(Primary)" color="primary"/>
<TDivider text="蓝色(Blue)" color="blue"/>
<TDivider text="绿色(Green)" color="green"/>
<TDivider text="红色(Red)" color="red"/>
<TDivider text="橙色(Orange)" color="orange"/>
<TDivider text="紫色(Purple)" color="purple"/>
<TDivider text="青色(Cyan)" color="cyan"/>

紧凑模式

spaceless 属性减小分割线的上下间距,适合在紧凑布局中使用。

vue

<TDivider text="区块一(默认间距)"/>
<TDivider text="区块二(紧凑模式)" spaceless/>
<TDivider text="区块三"/>

API

Props

Prop说明类型默认值
text分割线文字(也可通过默认插槽传入)stringundefined
position文字对齐位置'start' | 'center' | 'end''center'
color文字颜色(Tabler 预设色)TablerColorundefined
spaceless紧凑模式(减小上下间距)booleanfalse

Slots

插槽说明
default分割线文字内容,优先级高于 text prop