Line 线条

17:06

说明

在内容块之间绘制一条分隔线：direction 决定横向或竖向，length 控制长度（竖向时为高度，支持百分比与带单位数值），border-style 可切换实线 / 虚线 / 点线。hair-line 开启时把 1px 边框压成 0.5px 细线（基于 transform）。

兼容性

平台	支持情况
App	⚠️ 部分支持（hair-line 的 0.5px 缩放基于 transform，源码在 App 端跳过，线宽恒为 1px）
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

默认横向实线，length 为 100% 撑满父级宽度。

查看源码

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

自定义颜色 color

color 指定线条颜色，不传时取主题边框色。

查看源码

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

自定义长度 length

length 支持百分比与带单位数值，这里分别为 50% 与 150px。

查看源码

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

竖向线条 direction="col"

direction="col" 切换为竖向线，length 变为高度；示例用 margin 与两侧文字拉开间距。

查看源码

<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>

线条类型 border-style

border-style 支持 solid / dashed / dotted，这里展示 dashed 与 dotted。

查看源码

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

粗细线条 hair-line

hair-line 默认 true 为 0.5px 细线，传 false 使用 1px 粗线（App 端两者相同）。

查看源码

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

边距 margin

margin 控制线条与上下内容的间距，示例为 15px 0。

查看源码

<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

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
color	线条的颜色	string	''	-
length	长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等	string	'100%'	-
direction	线条方向，row-横向，col-竖向(默认row)	string	'row'	-
hairLine	是否显示细线条	boolean	true	-
margin	线条与上下左右元素的间距，字符串形式，如"15px"	string	'0'	-
borderStyle	线条的类型，solid-实线，dashed-方形虚线，dotted-圆点虚线	string	'solid'	-

Events

ux-line 无事件。

Slots

ux-line 无插槽。

注意事项

1. hair-line 的 0.5px 效果由 transform: scaleY(0.5) / scaleX(0.5) 实现，源码用 #ifndef APP 跳过该分支，App 端线宽恒为 1px。
2. 竖向（direction="col"）时 length 表示高度，横向时表示宽度，可传百分比（如 50%）或带单位数值（如 150px）。
3. margin 是字符串形式的完整 margin 值（如 "15px 0"），不能只传数字。