介绍

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

引入

import Divider from 'sard-uniapp/components/divider/divider.vue'

代码演示

基础使用

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

<template>
  <sar-divider></sar-divider>
</template>

展示文本

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

<template>
  <sar-divider>分割线</sar-divider>
</template>

内容位置

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

<template>
  <sar-divider position="left">分割线</sar-divider>
  <sar-divider position="right">分割线</sar-divider>
</template>

线条类型

通过 type 属性设置分割线类型。

<template>
  <sar-divider type="dashed">dashed</sar-divider>
  <sar-divider type="dotted">dotted</sar-divider>
</template>

自定义样式

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

<template>
  <sar-divider
    root-style="color: var(--sar-primary); border-color: rgba(var(--sar-primary-rgb), 0.6);"
  >
    分割线
  </sar-divider>
</template>

垂直

设置 vertical 属性可以垂直展示分割线

<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 变量

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;
}