Vant3 Divider 分割線

介紹

用于將內(nèi)容分隔為多個區(qū)域。

實例演示

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

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

代碼演示

基礎(chǔ)用法

默認(rèn)渲染一條水平分割線。

<van-divider />

展示文字

通過插槽在可以分割線中間插入內(nèi)容。

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

內(nèi)容位置

通過 content-position 指定內(nèi)容所在位置。

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

虛線

添加 dashed 屬性使分割線渲染為虛線。

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

自定義樣式

可以直接通過 style 屬性設(shè)置分割線的樣式。

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

API

Props

Slots

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。