uView

# Line 线条

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

# 平台差异说明

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

警告

当color使用后，colorType将时效，关怀模式的颜色也将失效

# 基本使用

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

  • color为线条的颜色，优先级高于colorType。
  • colorType为线条的颜色类型
  • direction为线条的方向，默认为横向
  • hair-line为是否设置细线条(0.5px)，默认为true
  • length参数需要特别留意，它需要带上单位，比如设置为"50%"，"500rpx"等，在线条为横向时，表现为线条的长度；在线条为竖向时，表现为线条的高度。
<template>
	<!-- 头条小程序因为兼容性，必须要给组件写上u-line类 -->
	<u-line :theme="theme" class="u-line" :border-style="borderStyle" :colorType="colorType" :length="length" :direction="direction" :hair-line="hairLine"></u-line>
</template>
<script>
	export default {
		data() {
			return {
				theme: 'normal',
				direction: 'row',
				hairLine: true,
				length: '100%',
				colorType: 'default',
				borderStyle: 'solid'
			}
		}
	}
</script>

# 线条类型
1.3.7

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

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

# 兼容性

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

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

# API

# Props

参数 说明 类型 默认值 可选值
theme
FPI
 主题模式，普通模式normal，关怀模式care String normal care
color 线条的颜色 String #e4e7ed -
colorType 线条的颜色类型 String default primary / success / warning / error
Type 类型 length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等 String 100%
direction 线条的方向，row-横向，col-竖向 String row col
hair-line 是否显示细线条 Boolean true false
margin 线条与上下左右元素的间距，字符串形式，如"30rpx"、"20rpx 30rpx" String - -
border-style
1.3.7
 线条类型，见上方说明 String solid dashed / dotted

← Mask 遮罩层 →