目录

#平台差异说明

#基本使用

#线条类型1.3.7

#兼容性

#API

#Props

此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。

#平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序
√√√√√√√

#基本使用

组件内部有预置的参数，直接使用即可，有如下几个参数需要了解：

  • color为线条的颜色
  • direction为线条的方向，默认为横向
  • hair-line为是否设置细线条(0.5px)，默认为true
  • length参数需要特别留意，它需要带上单位，比如设置为”50%”，”500rpx”等，在线条为横向时，表现为线条的长度；在线条为竖向时，表现为线条的高度。
/* 等同于 */

#线条类型1.3.7

我们可以通过border-style参数设置线条的类型，有如下三种可选项：

  • solid表示实线
  • dashed表示方形虚线
  • dotted表示圆点虚线

#兼容性

由于头条小程序的兼容性，如果组件无效的情况下，您可能需要给组件加上u-line类，如下：

#API

#Props

参数说明类型默认值可选值
color线条的颜色String#e4e7ed–
length长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等String100%–
direction线条的方向，row-横向，col-竖向Stringrowcol
hair-line是否显示细线条Booleantruefalse
margin线条与上下左右元素的间距，字符串形式，如”30rpx”、”20rpx 30rpx”String––
border-style1.3.7线条类型，见上方说明Stringsoliddashed / dotted