Divider

introduce

Used to separate content into multiple areas.

Code Demo

Basic usage

A horizontal dividing line is rendered by default.

<z-divider />

Display text

Insert content in the middle of separable lines through slots.

<z-divider>Text</z-divider>

Content location

Specify the location of the content through content-position.

<z-divider content-position="left">Text</z-divider>
<z-divider content-position="right">text</z-divider>

dashed line

Add the dashed attribute to render the split line as a dashed line.

<z-divider dashed>text</z-divider>

Custom style

The style of the dividing line can be set directly through the style attribute.

<z-divider
   :custom-style="{
     borderColor: '#1989fa',
     color: '#1989fa',
     padding: '0 32rpx'
   }"
>
   Word
</z-divider>

vertical

<div class="content">
   <z-divider vertical />
   Word
   <z-divider vertical dashed />
   Word
   <z-divider vertical :hairline="false" />
   Word
   <z-divider vertical :custom-style="{ borderColor: '#1989fa' }" />
</div>

API

Props

Parameters	Description	Type	Default value
dashed	Whether to use dashed lines	boolean	`false`
hairline	Whether to use 0.5px line	boolean	`true`
content-position	Content position, optional values are `left` `right`	string	`center`
vertical	Whether to use vertical	boolean	`false`

Slots

Name	Description
default	content

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

Name	Default	Description
--z-divider-margin	var(--z-padding-md) 0	-
--z-divider-vertical-margin	0 var(--z-padding-xs)	-
--z-divider-text-color	var(--z-text-color-2)	-
--z-divider-font-size	var(--z-font-size-md)	-
--z-divider-line-height	48rpx	-
--z-divider-border-color	var(--z-border-color)	-
--z-divider-content-padding	var(--z-padding-md)	-
--z-divider-content-left-width	10%	-
--z-divider-content-right-width	10%	-