106 lines
2.6 KiB
Markdown
106 lines
2.6 KiB
Markdown
# Divider 分割线
|
|
|
|
用于将内容分隔为多个区域。
|
|
|
|
:::danger 请注意
|
|
`hairline`、`dashed`、`content-position`、`vertical`属性为 1.5.0 版本新增支持，在此之前仅支持默认插槽显示文本和自定义`color`。
|
|
:::
|
|
|
|
## 基本使用
|
|
|
|
默认渲染一条水平分割线。
|
|
|
|
```html
|
|
<wd-divider></wd-divider>
|
|
```
|
|
|
|
## 展示文本
|
|
|
|
使用默认插槽在分割线中间插入内容。
|
|
|
|
```html
|
|
<wd-divider>展示文本</wd-divider>
|
|
```
|
|
|
|
## 自定义渲染内容
|
|
|
|
使用默认插槽在分割线中间插入自定义内容。
|
|
|
|
```html
|
|
<wd-divider>
|
|
<wd-icon name="arrow-down" size="20" color="#1989fa" />
|
|
</wd-divider>
|
|
```
|
|
|
|
## 内容位置
|
|
|
|
通过 `content-position` 指定内容所在位置。
|
|
|
|
```html
|
|
<wd-divider>中间</wd-divider>
|
|
<wd-divider content-position="left">左侧</wd-divider>
|
|
<wd-divider content-position="right">右侧</wd-divider>
|
|
```
|
|
|
|
## 虚线
|
|
|
|
添加 `dashed` 属性使分割线渲染为虚线。
|
|
|
|
```html
|
|
<wd-divider dashed>虚线分割</wd-divider>
|
|
```
|
|
|
|
## 自定义颜色
|
|
|
|
设置 `color` 属性。
|
|
|
|
```html
|
|
<wd-divider color="#4D80F0">自定义颜色</wd-divider>
|
|
```
|
|
|
|
## 垂直分割线
|
|
|
|
添加 `vertical` 属性使分割线渲染为垂直分割线。
|
|
|
|
```html
|
|
<view class="content">
|
|
文本
|
|
<wd-divider vertical />
|
|
文本
|
|
<wd-divider vertical dashed />
|
|
文本
|
|
<wd-divider vertical :hairline="false" />
|
|
文本
|
|
<wd-divider vertical color="#1989fa" />
|
|
文本
|
|
</view>
|
|
```
|
|
|
|
```css
|
|
.content {
|
|
padding: 12rpx 15px;
|
|
}
|
|
```
|
|
|
|
## Attributes
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
|
| ---------------- | ------------------------------ | ------- | ----------------------- | -------- | ---------------- |
|
|
| color | 自定义颜色，支持所有颜色的写法 | string | - | - | - |
|
|
| hairline | 是否显示边框 | boolean | - | true | 1.5.0 |
|
|
| dashed | 是否显示为虚线 | boolean | - | false | 1.5.0 |
|
|
| content-position | 内容位置 | string | `left`/`center`/`right` | `center` | 1.5.0 |
|
|
| vertical | 是否显示为垂直分割线 | boolean | - | false | 1.5.0 |
|
|
|
|
## Slot
|
|
|
|
| name | 说明 | 最低版本 |
|
|
| ------- | ---- | -------- |
|
|
| default | 内容，仅在 `vertical` 为 `false` 时生效 | - |
|
|
|
|
## 外部样式类
|
|
|
|
| 类名 | 说明 | 最低版本 |
|
|
| ------------ | ---------- | -------- |
|
|
| custom-class | 根节点样式 | - |
|