介绍
用于将内容分隔为多个区域。
引入
代码演示
基础用法
默认渲染一条水平分割线。
展示文字
通过插槽在可以分割线中间插入内容。
内容位置
通过 `content-position` 指定内容所在位置。
虚线
添加 `dashed` 属性使分割线渲染为虚线。
自定义样式
可以直接通过 `style` 属性设置分割线的样式。
API
Props
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| dashed | 是否使用虚线 | boolean | false | |
| hairline | 是否使用 0.5px 线 | boolean | true | |
| content-position | 内容位置，可选值为left right | string | center |
Slots
| 名称 | 说明 | |
|---|---|---|
| default | 内容 |
样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考
。
| 名称 | 默认值 | 描述 | |
|---|---|---|---|
| @divider-margin | @padding-md 0 | - | |
| @divider-text-color | @gray-6 | - | |
| @divider-font-size | @font-size-md | - | |
| @divider-line-height | 24px | - | |
| @divider-border-color | @border-color | - | |
| @divider-content-padding | @padding-md | - | |
| @divider-content-left-width | 10% | - | |
| @divider-content-right-width | 10% | - |
效果图：
