区隔内容的分割线,一般用于页面底部"没有更多"的提示。
#平台差异说明
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
#设置文本颜色和线条颜色
可以通过textColor
和lineColor
指定文字刚线条颜色
<u-divider text="分割线" textColor="#2979ff" lineColor="#ff0000" ></u-divider>