Line 线条

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

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

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

• color 属性为线条的颜色
• direction 属性为线条的方向，默认为横向
• hairline 属性为是否设置细线条（0.5px），默认为 true
• length 属性需要特别留意，它需要带上单位，比如设置为"50%"，"600rpx"等，在线条为横向时，表现为线条的长度；在线条为竖向时，表现为线条的高度。

<fu-line color="red"></fu-line>

设置线条类型

通过 borderStyle 属性设置线条类型，可选项：

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

兼容性

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

<fu-line class="fu-line"></fu-line>

API

Line Props

属性名	说明	类型	默认值	可选值
color	线条的颜色	String	#d6d7d9	-
length	线条的长度，详见上方基础用法	String｜Number	100%	-
direction	线条的方向, row 横向，col 竖向	String	row	col
hairline	是否设置细线条	Boolean	true	false
margin	线条与上下左右元素的间距，字符串形式，如"30rpx"、"15rpx 30rpx"	String｜Number	0	-
borderStyle	线条的类型，详见上方设置线条类型	String	solid	dashed/dotted
borderWidth	设置线条宽度	String｜Number	1px	-
customClass	定义需要用到的外部类	String	-	-
customStyle	定义需要用到的外部样式	String｜Object	-	-