Line

17:06

Description

Draws a separator line between content blocks: direction switches horizontal/vertical, length sets the length (height when vertical; percentages and unit values are supported), and border-style picks solid / dashed / dotted. With hair-line enabled the 1px border is scaled down to a 0.5px hairline (via transform).

Compatibility

Platform	Support
App	⚠️ Partial (hair-line's 0.5px scaling uses transform, which the source skips on App, so the line stays 1px there)
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

Basic Usage

Horizontal solid line by default; length is 100% to fill the parent width.

View source

<template>
    <ux-line />
</template>

Custom Color (color)

color sets the line color; when omitted the theme border color is used.

View source

<template>
    <ux-line color="#f56c6c" />
</template>

Custom Length (length)

length accepts a percentage or a unit value; here 50% and 150px.

View source

<template>
    <view>
        <ux-line length="50%" />
        <ux-line length="150px" />
    </view>
</template>

Vertical Line (direction="col")

direction="col" switches to a vertical line, so length becomes the height; the example uses margin to space it from the text on both sides.

View source

<template>
    <view class="row">
        <text>左边内容</text>
        <ux-line direction="col" length="50px" margin="0 10px" />
        <text>右边内容</text>
    </view>
</template>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
</style>

Line Style (border-style)

border-style supports solid / dashed / dotted; here dashed and dotted are shown.

View source

<template>
    <view>
        <ux-line border-style="dashed" />
        <ux-line border-style="dotted" />
    </view>
</template>

Hairline (hair-line)

hair-line is true by default for a 0.5px hairline; pass false for a 1px line (identical on App).

View source

<template>
    <view>
        <ux-line />
        <ux-line :hair-line="false" />
    </view>
</template>

Margin (margin)

margin controls the gap to the content above and below; here 15px 0.

View source

<template>
    <view class="box">
        <text>上方内容</text>
    </view>
    <ux-line margin="15px 0" />
    <view class="box">
        <text>下方内容</text>
    </view>
</template>

<style scoped>
.box {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f3f5;
    border-radius: 8px;
}
</style>

API

Props

Property	Description	Type	Default	Version
customStyle	Custom root element style	string | UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
color	Line color	string	''	-
length	Length; it is the height when vertical and the width when horizontal. A percentage or a value with a px unit is accepted	string	'100%'	-
direction	Line direction: row – horizontal, col – vertical (default row)	string	'row'	-
hairLine	Whether to render a hairline (0.5px)	boolean	true	-
margin	Spacing between the line and the elements around it, as a string, e.g. "15px"	string	'0'	-
borderStyle	Line style: solid – solid line, dashed – square dashes, dotted – round dots	string	'solid'	-

Events

ux-line has no events.

Slots

ux-line has no slots.

Notes

1. The 0.5px hair-line effect is produced by transform: scaleY(0.5) / scaleX(0.5); the source skips that branch with #ifndef APP, so the line is always 1px on App.
2. When vertical (direction="col") length is the height; when horizontal it is the width. A percentage (e.g. 50%) or a unit value (e.g. 150px) is accepted.
3. margin is a full margin string (e.g. "15px 0"), not a bare number.