Fighting DesignDivider 分隔线
段落的分隔符
基本使用
分隔线的基本使用
我是分隔线
开启
文字显示位置
position 属性可以配置文字显示的位置
我是左边的文字
我是居中的文字
我是右边的文字
开启
自定义颜色
color 属性可以配置不同的线条颜色
font-color 属性配置不同文字颜色
background 属性配置文字背景颜色
默认颜色
我是绿色
我是蓝色
开启
上下距离
margin 可以配置上下的距离
假装是内容
距离上下60px
假装是内容
开启
竖着显示
vertical 属性可以竖着显示，将不会展示默认插槽
开启
分隔符样式
当你厌倦了直线分隔符 type 属性可以让它换一个样式
我是虚线
我是圆点
我是双实线
开启
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
position | 文字显示位置 | DividerType | left center right | center |
vertical | 是否为竖线 | boolean | —— | false |
color | 线条颜色 | string | —— | —— |
font-color | 文字颜色 | string | —— | —— |
background | 背景颜色 | boolean | —— | —— |
margin | 上下边距 | string / number | —— | —— |
height | 自定义高度，仅在 vertical 为 true 时生效 | string / number | —— | —— |
type | 分隔符类型 | DividerPosition | dashed dotted double solid | solid |
Interface
组件导出以下类型定义：
ts
import type {
DividerInstance,
DividerProps,
DividerPosition,
DividerType
} from 'fighting-design'DividerType
ts
type DividerType = 'dashed' | 'dotted' | 'double' | 'solid'DividerPosition
ts
type DividerPosition = 'left' | 'center' | 'right'样式变量
组件提供了下列 CSS 变量，可用于自定义样式
| 名称 | 描述 |
|---|---|
--divider-type | 线的类型 |
--divider-color | 线条颜色 |
--divider-background | 背景颜色 |
--divider-font-color | 文字颜色 |
--divider-margin | 边距 |
--divider-height | 高度 |