Divider

Used to separate content into multiple areas.

Component Type

Basic Usage

Default renders a horizontal divider line.

<wd-divider />

Display Text

Use default slot to insert content in the middle of the divider.

<wd-divider>Display Text</wd-divider>

Component Variant

Content Position

Specify content position through content-position.

<wd-divider>Center</wd-divider>
<wd-divider content-position="left">Left</wd-divider>
<wd-divider content-position="right">Right</wd-divider>

Dashed Line

Add dashed to render divider as dashed line.

<wd-divider dashed>Dashed Divider</wd-divider>

Component Style

Custom Render Content

Use default slot to render custom content.

<wd-divider>
  <wd-icon name="down" size="20" />
</wd-divider>

Custom Color

Set color to customize divider color.

<wd-divider color="#4D80F0">Custom Color</wd-divider>

Special Style

Vertical Divider

Add vertical to render divider as vertical direction, default slot does not take effect in vertical mode.

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

.content {
  padding: 12rpx 15px;
}

Attributes

Parameter	Description	Type	Default Value
color	Custom color, supports all valid color values	string	-
content-position v1.5.0	Content position, optional values are left, center, right	DividerPosition	'center'
dashed v1.5.0	Whether to display as dashed line	boolean	false
vertical v1.5.0	Whether to display as vertical divider	boolean	false
hairline v1.5.0	Whether to display as 0.5px thin line	boolean	true
custom-class	Root node custom class name	string	''
custom-style	Root node custom style	string	''

Slots

Name	Description	Parameters
default	Divider content, only takes effect when vertical is false	-

External Style Classes

Class Name	Description
custom-class	Root node style 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	默认内边距

Source Code

Documentation

• Component