返回介绍

开发指南

组件

JS

模板

Line 线条

发布于 2021-04-03 05:35:23 字数 1970 浏览 969 评论 0 收藏 0

Line 线条 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

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

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

线条类型 1.3.7

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

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

兼容性

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

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

API

Props

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文