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'