Divider 分割线

介绍

用于将内容分隔为多个区域。

基础用法

默认渲染一条水平分割线。

<z-divider />

展示文本

通过插槽在可以分割线中间插入内容。

<z-divider>文本</z-divider>

内容位置

通过 content-position 指定内容所在位置。

<z-divider content-position="left">文本</z-divider>
<z-divider content-position="right">文本</z-divider>

虚线

添加 dashed 属性使分割线渲染为虚线。

<z-divider dashed>文本</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>

Props

Slots

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。