Divider 分割线
用于将内容分隔为多个区域。
代码演示
基础用法
分割线中间自定义内容。
<hd-divider>文本内容</hd-divider>
<hd-divider><text>文本内容</text></hd-divider>
分割线颜色
通过borderColor
属性来控制分割线颜色。
<hd-divider borderColor="#FC2C4A">文本内容</hd-divider>
细线
通过hairline
属性控制分割线是否是细线,默认false
。
<hd-divider :hairline="true">文本内容</hd-divider>
虚线
通过dashed
属性控制分割线是否是虚线,默认false
。
<hd-divider :dashed="true">文本内容</hd-divider>
Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
textColor | 文本颜色 | String | false | - |
borderColor | 分割线颜色 | String | false | - |
fontSize | 文本字体大小 | String | false | - |
hairline | 是否为细线 | Boolean | false | 默认值是:false |
dashed | 是否为虚线 | Boolean | false | 默认值是:false |
Slots
Name | Description | Default Slot Content |
---|---|---|
default | 分割线中间自定义内容 | - |