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


相关文章
|
5月前
|
数据处理 开发者
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
【5月更文挑战第17天】提升Uniapp开发效率的关键包括组件化、模板语法、数据处理和代码组织。通过封装组件如通用按钮,利用列表渲染生成多个元素,使用计算属性和方法处理复杂逻辑,以及采用预处理器如Sass编写样式。此外,良好的代码结构和使用开发者工具进行调试也是重要环节。掌握这些进阶技巧能帮助开发者更高效地构建高质量应用。
94 2
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
|
3月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
70 4
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
42 1
|
3月前
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
305 1
|
3月前
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
58 1
|
3月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
128 1
|
3月前
uniapp【组件封装】时间戳格式化为星期
uniapp【组件封装】时间戳格式化为星期
62 0
|
3月前
|
数据库
uniapp 【专题详解 -- 时间】云数据库时间类型设计,时间生成、时间格式化渲染(uni-dateformat 组件的使用)
uniapp 【专题详解 -- 时间】云数据库时间类型设计,时间生成、时间格式化渲染(uni-dateformat 组件的使用)
124 0
|
3月前
uniapp 新建组件
uniapp 新建组件
33 0
|
3月前
|
前端开发 JavaScript 索引
uniapp的u-album组件自定义删除功能
这样,你就可以在u-album组件中实现自定义的删除功能了。需要注意的是,这个删除操作只是在前端删除了图片项,并没有在后端删除对应的图片文件,如果你需要在后端也删除对应的图片文件,你还需要在删除操作后发送一个请求到后端,让后端删除对应的图片文件。
81 0
下一篇
无影云桌面