介绍
用于将内容分隔为多个区域。
引入
js
import Divider from 'sard-uniapp/components/divider/divider.vue'代码演示
基础使用
默认渲染一条水平分割线。
vue
<template>
<sar-divider></sar-divider>
</template>展示文本
通过插槽在可以分割线中间插入内容。
vue
<template>
<sar-divider>分割线</sar-divider>
</template>内容位置
通过 position 指定内容所在位置。
vue
<template>
<sar-divider position="left">分割线</sar-divider>
<sar-divider position="right">分割线</sar-divider>
</template>线条类型
通过 type 属性设置分割线类型。
vue
<template>
<sar-divider type="dashed">dashed</sar-divider>
<sar-divider type="dotted">dotted</sar-divider>
</template>自定义样式
可以直接通过 style 属性设置分割线的样式。
vue
<template>
<sar-divider
root-style="color: var(--sar-primary); border-color: rgba(var(--sar-primary-rgb), 0.6);"
>
分割线
</sar-divider>
</template>垂直
设置 vertical 属性可以垂直展示分割线
vue
<template>
<sar-divider vertical />
<text>文本</text>
<sar-divider vertical type="dashed"></sar-divider>
<text>文本</text>
<sar-divider vertical :hairline="false"></sar-divider>
<text>文本</text>
<sar-divider
vertical
root-style="border-color: rgba(var(--sar-primary-rgb), 0.6)"
></sar-divider>
<text>文本</text>
</template>API
DividerProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| type | 分割线类型 | 'solid' | 'dashed' | 'dotted' | 'solid' |
| hairline | 是否显示半像素分割线 | boolean | true |
| position | 内容位置 | 'left' | 'right' | 'center' | 'center' |
| vertical | 是否垂直显示分割线 | boolean | false |
DividerSlots
| 插槽 | 描述 | 属性 |
|---|---|---|
| default | 自定义默认内容 | - |
主题定制
CSS 变量
scss
page,
.sar-portal {
--sar-divider-margin-y: 32rpx;
--sar-divider-margin-x: 16rpx;
--sar-divider-gap: 32rpx;
--sar-divider-color: var(--sar-tertiary-color);
--sar-divider-border-color: var(--sar-border-color);
--sar-divider-left-width: 10%;
--sar-divider-right-width: 10%;
--sar-divider-vertical-height: 1em;
}