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 | - | - |

Slot

| 名称 | 说明 | |-----------|-----------| | 默认 | 自定义文本内容 |