---

url: 'https://wot-ui.cn/component/divider.md'

Divider 分割线

用于将内容分隔为多个区域。

:::danger 请注意
hairline、dashed、content-position、vertical属性为 1.5.0 版本新增支持，在此之前仅支持默认插槽显示文本和自定义color。
:::

基本使用

默认渲染一条水平分割线。

<wd-divider></wd-divider>

展示文本

使用默认插槽在分割线中间插入内容。

<wd-divider>展示文本</wd-divider>

自定义渲染内容

使用默认插槽在分割线中间插入自定义内容。

<wd-divider>
  <wd-icon name="arrow-down" size="20" color="#1989fa" />
</wd-divider>

内容位置

通过 content-position 指定内容所在位置。

<wd-divider>中间</wd-divider>
<wd-divider content-position="left">左侧</wd-divider>
<wd-divider content-position="right">右侧</wd-divider>

虚线

添加 dashed 属性使分割线渲染为虚线。

<wd-divider dashed>虚线分割</wd-divider>

自定义颜色

设置 color 属性。

<wd-divider color="#4D80F0">自定义颜色</wd-divider>

垂直分割线

添加 vertical 属性使分割线渲染为垂直分割线。

<view class="content">
  文本
  <wd-divider vertical />
  文本
  <wd-divider vertical dashed />
  文本
  <wd-divider vertical :hairline="false" />
  文本
  <wd-divider vertical color="#1989fa" />
  文本
</view>

.content {
  padding: 12rpx 15px;
}

Attributes

| color | 自定义颜色，支持所有颜色的写法 | string | - | - | - |
| hairline | 是否显示边框 | boolean | - | true | 1.5.0 |
| dashed | 是否显示为虚线 | boolean | - | false | 1.5.0 |
| content-position | 内容位置 | string | left/center/right | center | 1.5.0 |
| vertical | 是否显示为垂直分割线 | boolean | - | false | 1.5.0 |

Slot

| default | 内容，仅在 vertical 为 false 时生效 | - |

外部样式类

| custom-class | 根节点样式 | - |