Divider 分割线
介绍
用于将内容分隔为多个区域。
代码演示
内容位置
通过 content-position
指定内容所在位置。
<z-divider content-position="left">文本</z-divider>
<z-divider content-position="right">文本</z-divider>
自定义样式
可以直接通过 style
属性设置分割线的样式。
<z-divider
:custom-style="{
borderColor: '#1989fa',
color: '#1989fa',
padding: '0 32rpx'
}"
>
文字
</z-divider>
垂直
<div class="content">
<z-divider vertical />
文字
<z-divider vertical dashed />
文字
<z-divider vertical :hairline="false" />
文字
<z-divider vertical :custom-style="{ borderColor: '#1989fa' }" />
</div>
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
dashed | 是否使用虚线 | boolean | false |
hairline | 是否使用 0.5px 线 | boolean | true |
content-position | 内容位置,可选值为 left right | string | center |
vertical | 是否使用垂直 | boolean | false |
Slots
名称 | 说明 |
---|---|
default | 内容 |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--z-divider-margin | var(--z-padding-md) 0 | - |
--z-divider-vertical-margin | 0 var(--z-padding-xs) | - |
--z-divider-text-color | var(--z-text-color-2) | - |
--z-divider-font-size | var(--z-font-size-md) | - |
--z-divider-line-height | 48rpx | - |
--z-divider-border-color | var(--z-border-color) | - |
--z-divider-content-padding | var(--z-padding-md) | - |
--z-divider-content-left-width | 10% | - |
--z-divider-content-right-width | 10% | - |