Divider 分割线
示例
基础用法
<Divider />
带内容的分割线
<Divider class="py-2">内容默认在中间</Divider>
<Divider class="py-2" contentPosition="left">左侧内容</Divider>
<Divider class="py-2" contentPosition="right">右侧内容</Divider>
自定义样式
<Divider style="color: #1677ff; border-color: #1677ff; border-style: dashed">
自定义样式
</Divider>
竖向分割线
<p class="bg-white text-center" style="font-size: 24px; line-height: 36px">
<span>Text</span>
<Divider direction="vertical" />
<a class="text-blue-600 underline" href="./divider">Link</a>
<Divider direction="vertical" />
<a class="text-blue-600 underline" href="./divider">Link</a>
</p>
换行
<p class="bg-white px-4 py-2" style="font-size: 17px;">
<span>新疆维吾尔自治区</span>
<Divider direction="vertical" />
<span>博尔塔拉蒙古自治州</span>
<Divider direction="vertical" />
<span>阿拉山口市</span>
</p>
Divider
属性
属性 |
说明 |
类型 |
默认值 |
contentPosition |
内容位置。仅在 direction 为 'horizontal' 时有效 |
'center' | 'left' | 'right' |
'center' |
direction |
水平还是垂直类型 |
'horizontal' | 'vertical' |
'horizontal' |