当前位置: 首页 > 文档资料 > FeArt 中文文档 >

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