# tui-divider 分隔符

介绍

可设置占据高度,线条宽度,颜色等。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiDivider from "@/components/thorui/tui-divider/tui-divider"
export default {
	components:{
		tuiDivider
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 升级中 升级中 升级中 升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-divider": "/components/thorui/tui-divider/tui-divider"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基础使用
<tui-divider>默认divider</tui-divider>
改变线条颜色

通过 dividerColor 属性设置线条颜色。

<tui-divider dividerColor="red">改变线条颜色</tui-divider>
改变线条宽度

通过 width 属性设置线条宽度。

<tui-divider width="80%">改变线条宽度</tui-divider>
渐变线条

通过 gradual 属性设置线条为渐变色,可通过属性 gradualColor 传入自定义渐变颜色。

<tui-divider width="60%" gradual>渐变线条</tui-divider>

# Slots

名称 说明
default 标签显示内容,可自定义divider内显示内容

# Props

参数 类型 说明 默认值
height Number divider占据高度 单位rpx 100
width String divider宽度,可填写具体长度,如400rpx 100%
dividerColor String divider颜色,如果为渐变线条,此属性失效 #e5e5e5
color String 文字颜色 #999
size Number 文字大小 单位rpx 24
bold Boolean 文字是否加粗 false
backgroundColor String 背景颜色,和当前页面背景色保持一致 #fafafa
gradual Boolean 是否为渐变线条,为true,divideColor失效 false
gradualColor Array 渐变色值,to right ,提供两个色值即可,由浅至深 ['#eee', '#ccc']

# Events

none

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码