uniapp组件库Line 线条 的适用方法

简介: uniapp组件库Line 线条 的适用方法

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

#平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 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单位的值等 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


相关文章
|
1月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
52 10
|
1月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
82 5
|
1月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
71 2
|
1月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
63 1
|
1月前
Uniapp矩阵评分组件
Uniapp矩阵评分组件
49 1
|
19天前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
35 0
|
1月前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
35 0
|
1月前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
60 0
|
1月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
84 0
|
4月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
113 4