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>
相关文章
|
6月前
uView colorSwitch 颜色转换
uView colorSwitch 颜色转换
49 0
|
5月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
58 3
|
6月前
|
移动开发 小程序 API
uniapp组件库Line 线条 的适用方法
uniapp组件库Line 线条 的适用方法
312 0
|
前端开发
|
11月前
|
前端开发
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
250 0
49Echarts - 柱状图(Mixed Line and Bar)
49Echarts - 柱状图(Mixed Line and Bar)
45 0
|
前端开发
CSS 最简洁的内容上下左右居中方法grid
CSS 最简洁的内容上下左右居中方法grid
|
IDE Java 开发工具
Eclipse颜色主题(Color Theme)与缩进线(Indent Guide)插件安装教程
Eclipse颜色主题(Color Theme)与缩进线(Indent Guide)插件安装教程
406 0
|
缓存 Linux 开发工具
[oeasy]python0074_修改字体背景颜色_background_color_背景色
[oeasy]python0074_修改字体背景颜色_background_color_背景色
111 0
[oeasy]python0074_修改字体背景颜色_background_color_背景色
|
JavaScript
js:rgb颜色表示转hex颜色表示
js:rgb颜色表示转hex颜色表示
118 0