Divider

17:06

Description

Inserts a divider between content blocks. When the default slot has content the line is split into two segments around the text; with use-slot=false (or no slot content) a single full-width line is drawn. border-color takes precedence over type, and half-width sets the width of each side.

Compatibility

Platform	Support
App	⚠️ Partial (the 0.5px hairline is produced by transform: scale(1, 0.5), which the source skips on App, so the line stays 1px there; the inline-flex on the text area also applies only off App)
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

Basic Usage

Pass text through the default slot; the line is split on both sides with the primary theme color.

View source

<template>
    <ux-divider>分割线</ux-divider>
</template>

Text Color (color)

color sets the middle text color; when omitted the tips color is used.

View source

<template>
    <ux-divider color="#f56c6c">分割线</ux-divider>
</template>

Line Color (border-color)

border-color sets the line color and takes precedence over type.

View source

<template>
    <ux-divider border-color="#2979ff">分割线</ux-divider>
</template>

Theme Color (type)

type accepts primary / info / success / warning / error and changes the theme color of the line.

View source

<template>
    <view>
        <ux-divider type="success">分割线</ux-divider>
        <ux-divider type="error">分割线</ux-divider>
        <ux-divider type="warning">分割线</ux-divider>
        <ux-divider type="info">分割线</ux-divider>
    </view>
</template>

Custom Height (height)

height sets the height of the whole divider in px, useful for vertical spacing and centering.

View source

<template>
    <ux-divider height="40">分割线</ux-divider>
</template>

Without Slot (use-slot)

With use-slot=false no middle text is rendered; a single full-width line is drawn.

View source

<template>
    <ux-divider :use-slot="false" />
</template>

Custom Half Width (half-width)

half-width sets the width of each side: a number is in px and a % value is proportional; here 100 and 50%.

View source

<template>
    <view>
        <ux-divider half-width="100">分割线</ux-divider>
        <ux-divider half-width="50%">分割线</ux-divider>
    </view>
</template>

API

Props

Property	Description	Type	Default	Version
customStyle	Custom root element style	string | UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
halfWidth	Width of each side line of the divider; a number is in px, a percentage is also accepted	string | number	75	-
borderColor	Color of the divider line; when set it takes precedence over type	string	''	-
type	Theme color; one of primary|info|success|warning|error	string	'primary'	-
color	Text color	string	''	-
fontSize	Text size, in px	string | number	DEFAULT_FONT_SIZE	-
bgColor	Background color of the whole divider	string	''	-
height	Height of the whole divider, in px	string | number	'auto'	-
marginTop	Top margin	string | number	0	-
marginBottom	Bottom margin	string | number	0	-
useSlot	Whether to render content passed through the slot; without slot content there is no gap in the middle	boolean	true	-

Events

Event	Description	Params	Version
click	Fires when the divider is tapped	-	-

Slots

Slot	Description	Version
default	Text content in the middle of the divider (effective when use-slot is true and slot content is provided)	-

Notes

1. Whether the middle text is drawn is decided by useSlot && default slot exists: with use-slot=false, or use-slot=true but no slot content, it degrades to a single full-width line.
2. border-color takes precedence over type; when both are set, border-color wins.
3. height set to the string 'auto' (default) keeps the height adaptive; a number is treated as px.
4. half-width as a string is checked for %: with % it is a percentage, otherwise px; a number is treated as px.
5. The 0.5px hairline relies on transform, which does not apply on App, so the line is 1px there.
6. The click event carries no callback argument.