vant分页 Vant4 Divider 分割线

介绍

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

引入

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

import { createApp } from "vue";
import { Divider } from "vant";

const app = createApp();
app.use(Divider);

代码演示

基础用法

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

<van-divider />

展示文字

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

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

内容位置

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

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

虚线

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

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

自定义样式

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

<van-divider
  :style="{ color: "#1989fa", borderColor: "#1989fa", padding: "0 16px" }"
>
  文字
</van-divider>

API

Props

Slots

类型定义

组件导出以下类型定义：

import type { DividerProps, DividerContentPosition } from "vant";

主题定制

样式变量

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