Divider 分割线
优质
小牛编辑
125浏览
2023-12-01
使用指南
引入方式
import { Divider } from "feart";
components:{
'fe-divider':Divider
}
代码演示
基础用法
默认渲染一条水平分割线
<fe-divider />
展示文字
通过插槽在可以分割线中间插入内容
<fe-divider>文字</fe-divider>
虚线
添加
dashed
属性使分割线渲染为虚线
<fe-divider dashed>文字</fe-divider>
内容位置
通过postion
指定内容所在位置
<fe-divider postion="left">文字</fe-divider>
<fe-divider postion="right">文字</fe-divider>
自定义样式
可以直接通过
style
属性设置分割线的样式
<fe-divider :style="{ color: '#1990fe', borderColor: '#1990fe' }">
文字
</fe-divider>
API
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
hairline | 是否使用 0.5px 线 | Boolean |
true |
- |
dashed | 是否使用虚线 | Boolean |
false |
- |
postion | 内容位置 | String |
center |
center ,left ,right |
- | - | - | - | - |
Slots
Slot 名 | 说明 | 备注 |
---|---|---|
default | 内容 | - |