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>

API

Props

参数说明类型默认值
dashed是否使用虚线booleanfalse
hairline是否使用 0.5px 线booleantrue
content-position内容位置,可选值为 left rightstringcenter
vertical是否使用垂直booleanfalse

Slots

名称说明
default内容

主题定制

样式变量

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

名称默认值描述
--z-divider-marginvar(--z-padding-md) 0-
--z-divider-vertical-margin0 var(--z-padding-xs)-
--z-divider-text-colorvar(--z-text-color-2)-
--z-divider-font-sizevar(--z-font-size-md)-
--z-divider-line-height48rpx-
--z-divider-border-colorvar(--z-border-color)-
--z-divider-content-paddingvar(--z-padding-md)-
--z-divider-content-left-width10%-
--z-divider-content-right-width10%-