@retailwe/ui-divider NPM

Wr-Divider 分割线

介绍

分割线

引入

在app.json或index.json中引入组件

"usingComponents": {
  "wr-divider": "@retailwe/ui-divider/index"
}

代码演示

基础用法

<wr-divider />

使用hairline

<wr-divider hairline />

虚线

<wr-divider dashed />

文本位置

<wr-divider contentPosition="center">文本</wr-divider>
  <wr-divider contentPosition="left">文本</wr-divider>
  <wr-divider contentPosition="right">文本</wr-divider>

自定义属性

<wr-divider contentPosition="center" textColor="#1989fa">文本颜色</wr-divider>
<wr-divider contentPosition="center" borderColor="#1989fa">border颜色</wr-divider>

自定义样式

<wr-divider contentPosition="center" customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;">文本</wr-divider>

API

Props

参数	说明	类型	默认值	版本
dashed	虚线	boolean	false	-
hairline	细线	boolean	false	-
content-position	文本位置，`left` `center` `right`	string	-	-
border-color	线条颜色	string	-	-
text-color	文本颜色	string	-	-
custom-style	自定义样式	string	-	-