uView Line 线条

简介: uView Line 线条

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

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

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

  • color为线条的颜色
  • direction为线条的方向,默认为横向
  • length参数需要特别留意,它需要带上单位,比如设置为"50%","500rpx"等,在线条为横向时,表现为线条的长度;在线条为竖向时,表现为线条的高度。
<template>
  /* 基础使用 */
  <u-line></u-line>
  
  /* 自定义颜色 */
  <u-line color="#2979ff"></u-line>
  
  /* 自定义线条方向 */
  <u-line direction="col"></u-line>
  
  /* 自定义线条长度 */
  <u-line length="50%"></u-line>
</template>

copy

#是否虚线

  • dashed控制线条是否虚线:
<template>
  <u-line dashed></u-line>
</template>
相关文章
|
1月前
uView colorSwitch 颜色转换
uView colorSwitch 颜色转换
26 0
|
10月前
Echarts仪盘表axisLine渐变及title颜色设置
Echarts仪盘表axisLine渐变及title颜色设置
137 0
|
6天前
|
移动开发 小程序 API
uniapp组件库Line 线条 的适用方法
uniapp组件库Line 线条 的适用方法
12 0
|
6月前
|
JavaScript 前端开发
vue ColorPicker 颜色选择器,传颜色值的问题
vue ColorPicker 颜色选择器,传颜色值的问题
48 0
|
9月前
ThreeJS 动画之 Noisy Lines
ThreeJS 动画之 Noisy Lines
39 1
|
4月前
element-ui 表格和 tooltip修改背景颜色和箭头颜色
element-ui 表格和 tooltip修改背景颜色和箭头颜色
224 0
|
5月前
|
前端开发
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
59 0
|
7月前
13Echarts - 折线图(Line Easing)
13Echarts - 折线图(Line Easing)
18 0
|
JavaScript
js:rgb颜色表示转hex颜色表示
js:rgb颜色表示转hex颜色表示
81 0
CSS绘图实现三角形并使用grid布局
CSS绘图实现三角形并使用grid布局
115 0
CSS绘图实现三角形并使用grid布局