uView Divider 分割线

简介: uView Divider 分割线

区隔内容的分割线,一般用于页面底部"没有更多"的提示。

#平台差异说明

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

#基本使用

文字内容通过text传入

<u-divider text="分割线"></u-divider>

copy

#设置虚线

可以通过dashed指定虚线

<u-divider text="分割线" :dashed="true"></u-divider>

copy

#设置细线

可以通过hairline指定细线

<u-divider text="分割线" :hairline="true"></u-divider>

copy

#设置以点代替文字

可以通过dot指定以点代替文字

<u-divider text="分割线" :dot="true"></u-divider>

copy

#设置文本靠左靠右

可以通过textPosition指定文字靠左靠右

<u-divider text="靠左" textPosition="left"></u-divider>
<u-divider text="靠右" textPosition="right"></u-divider>

copy

#设置文本颜色和线条颜色

可以通过textColorlineColor指定文字刚线条颜色

<u-divider
        text="分割线"
        textColor="#2979ff"
        lineColor="#ff0000"
></u-divider>
相关文章
|
6月前
|
移动开发 JavaScript 小程序
uView Popup 弹出层
uView Popup 弹出层
103 0
|
小程序
微信小程序在使用vant组件van-nav-bar出现的边框bug问题解决
微信小程序在使用vant组件van-nav-bar出现的边框bug问题解决
204 0
|
3月前
Vue3分割线(Divider)
这是一个可定制的分割线组件,支持多种属性设置,包括标题位置、边距、宽度、样式、颜色及垂直分割等。通过简单的配置即可实现多样化的视觉效果,适用于不同场景下的布局需求。在线预览和详细代码示例可见链接。
106 5
Vue3分割线(Divider)
|
6月前
Nuxt3 实战 (六):Footer 底部布局
这篇文章介绍了开发项目的Footer布局,参考了Nuxt-UI官网的布局。文章从需求拆分开始,讲解了准备工作和组件开发的过程。最后展示了最终效果,并进行了简单的总结,指出下一篇将讨论主体内容的开发。文末提供了Github仓库和线上预览的链接。
Nuxt3 实战 (六):Footer 底部布局
|
6月前
|
移动开发 小程序 前端开发
uView Layout 布局
uView Layout 布局
69 1
|
6月前
|
JavaScript API
uView Drawer 抽屉
uView Drawer 抽屉
96 0
|
6月前
|
移动开发 小程序 JavaScript
uView Navbar 自定义导航栏
uView Navbar 自定义导航栏
227 0
|
6月前
|
JSON JavaScript 数据格式
【经验分享】如何使用scroll-view + swiper制作tabs导航条组件。
【经验分享】如何使用scroll-view + swiper制作tabs导航条组件。
69 6
|
Dart 容器
Flutter非常常用的几个布局小控件Center,SizeBox,Divider
Flutter非常常用的几个布局小控件Center,SizeBox,Divider
|
JavaScript
elementui源码学习之仿写一个el-divider
elementui源码学习之仿写一个el-divider
221 0