Divider 分割线

介绍

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

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册

  1. import { createApp } from 'vue';
  2. import { Divider } from 'vant';
  3. const app = createApp();
  4. app.use(Divider);

代码演示

基础用法

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

  1. <van-divider />

展示文字

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

  1. <van-divider>文字</van-divider>

内容位置

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

  1. <van-divider content-position="left">文字</van-divider>
  2. <van-divider content-position="right">文字</van-divider>

虚线

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

  1. <van-divider dashed>文字</van-divider>

自定义样式

可以直接通过 style 属性设置分割线的样式。

  1. <van-divider
  2. :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
  3. >
  4. 文字
  5. </van-divider>

API

Props

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

Slots

名称说明
default内容

类型定义

组件导出以下类型定义:

  1. import type { DividerProps, DividerContentPosition } from 'vant';

主题定制

样式变量

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

名称默认值描述
—van-divider-marginvar(—van-padding-md) 0-
—van-divider-text-colorvar(—van-text-color-2)-
—van-divider-font-sizevar(—van-font-size-md)-
—van-divider-line-height24px-
—van-divider-border-colorvar(—van-border-color)-
—van-divider-content-paddingvar(—van-padding-md)-
—van-divider-content-left-width10%-
—van-divider-content-right-width10%-

Divider 分割线 - 图1