nutui/site_docs/docs_vue/docs/divider/doc.md

Divider 分割线

介绍

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

安装

import { createApp } from 'vue';
// vue
import { Divider } from '@nutui/nutui';
// taro
import { Divider } from '@nutui/nutui-taro';

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

代码演示

基础用法

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

<nut-divider />

展示文本

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

<nut-divider>文本</nut-divider>

内容位置

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

<nut-divider content-position="left">文本</nut-divider>
<nut-divider content-position="right">文本</nut-divider>

虚线

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

<nut-divider dashed />

自定义样式

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

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

API

Props

参数	说明	类型	默认值
dashed	是否使用虚线	Boolean	false
hairline	是否使用 0.5px 线	Boolean	true
content-position	内容位置，可选值为left right	String	center

Slots

| 名称 | 说明 | |--------|----------------| | default | 内容 |