Divider 分割线

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

组件类型

基本使用

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

<wd-divider />

展示文本

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

<wd-divider>展示文本</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>

组件样式

自定义渲染内容

使用默认插槽渲染自定义内容。

<wd-divider>
  <wd-icon name="down" size="20" />
</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	-
content-position v1.5.0	内容位置，可选值为 left、center、right	DividerPosition	'center'
dashed v1.5.0	是否显示为虚线	boolean	false
vertical v1.5.0	是否显示为垂直分割线	boolean	false
hairline v1.5.0	是否显示为 0.5px 细线	boolean	true
custom-class	根节点自定义类名	string	''
custom-style	根节点自定义样式	string	''

Slots

名称	说明	参数
default	分割线内容，仅在 vertical 为 false 时生效	-

外部样式类

类名	说明
custom-class	根节点样式类

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-divider-color-default	$text-auxiliary	默认文字颜色
--wot-divider-color-line	$border-main	分割线颜色
--wot-divider-padding	$padding-zero $padding-extra-loose	组件水平内边距
--wot-divider-margin	$spacing-extra-loose $spacing-zero	组件垂直外边距
--wot-divider-line-height	$n-3	分割线厚度
--wot-divider-size-line-height	$typography-body-line--height-size-main	内容文字行高
--wot-divider-size-vertical-height	$spacing-extra-loose	纵向分割线高度
--wot-divider-size-vertical-line-width	$n-3	纵向分割线宽度
--wot-divider-size-content-left-width	10%	左对齐模式左侧线段宽度
--wot-divider-size-content-right-width	10%	右对齐模式右侧线段宽度
--wot-divider-font-size-default	$typography-body-size-main	默认文字字号
--wot-divider-margin-default	$spacing-extra-loose	默认外边距
--wot-divider-margin-vertical-content	$spacing-tight	纵向模式内容间距
--wot-divider-margin-content-left	$spacing-loose	内容左侧间距
--wot-divider-margin-content-right	$spacing-loose	内容右侧间距
--wot-divider-padding-default	$spacing-zero	默认内边距

源代码

文档

• 组件