Vant3 Divider 分割线

您所在的位置:网站首页 竖向分割线图片 Vant3 Divider 分割线

Vant3 Divider 分割线

2023-10-11 22:15| 来源: 网络整理| 查看: 265

介绍

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

实例演示 引入

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

import { createApp } from 'vue'; import { Divider } from 'vant'; const app = createApp(); app.use(Divider); 代码演示 基础用法

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

展示文字

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

文字 内容位置

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

文字 文字 虚线

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

文字 自定义样式

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

文字 API Props 参数 说明 类型 默认值 dashed 是否使用虚线 boolean false hairline 是否使用 0.5px 线 boolean true content-position 内容位置,可选值为 left right string center Slots 名称 说明 default 内容 样式变量

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

名称 默认值 描述 --van-divider-margin var(--van-padding-md) 0 - --van-divider-text-color var(--van-gray-6) - --van-divider-font-size var(--van-font-size-md) - --van-divider-line-height 24px - --van-divider-border-color var(--van-border-color) - --van-divider-content-padding var(--van-padding-md) - --van-divider-content-left-width 10% - --van-divider-content-right-width 10% -



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3