2.6 KiB

Raw Blame History

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

name	说明	最低版本
default	内容，仅在 `vertical` 为 `false` 时生效	-

外部样式类

类名	说明	最低版本
custom-class	根节点样式	-

2.6 KiB Raw Blame History