uview-plus

# Divider 分割线

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

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

文字内容通过text传入

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

# 设置虚线

可以通过dashed指定虚线

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

# 设置细线

可以通过hairline指定细线

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

# 设置以点代替文字

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

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

# 设置文本靠左靠右

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

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

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

可以通过textColor和lineColor指定文字刚线条颜色

<up-divider
        text="分割线"
        textColor="#2979ff"
        lineColor="#ff0000"
></up-divider>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Props

参数 说明 类型 默认值 可选值
dashed 是否虚线 Boolean false true
hairline 是否细线 Boolean true false
dot 是否以点替代文字，优先于text字段起作用 Boolean false true
textPosition 内容文本的位置 String center left、right
text 文本内容 String | Number - -
textSize 文本大小 String | Number 14 -
textColor 文本颜色 String #909399 -
lineColor 线条颜色 String #dcdfe6 -

# Events

事件名 说明 回调参数 版本
click divider组件被点击时触发 - -

← Dropdown 下拉菜单 →