Divider 分隔线

介绍

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

导入

import Divider from '@/components/display/Divider.vue'

用法

基础用法

通过 Divider 组件显示分割线。

<template>
  <Text>分隔上下文字内容分隔上下文字内容分隔上下文字内容分隔上下文字内容</Text>
  <Divider />
  <Text>分隔上下文字内容分隔上下文字内容分隔上下文字内容分隔上下文字内容</Text>
</template>

分割线颜色

可以为分割线设置不同的颜色。

<template>
  <Divider text="默认颜色" />
  <Divider color="primary" text="自定义颜色" />
  <Divider color="danger" />
  <Divider color="warning" />
  <Divider color="success" />
</template>

虚线分割线

设置 dashed 或者 dotted 可显示虚线。

<template>
  <Divider color="primary" text="我是虚线分割线 + 文字" dashed />
  <Divider dashed color="primary" :width="2" />
  <Text>上面是 dashed 分割线。</Text>
  <Divider dotted color="primary" :width="2" />
  <Text>上面是 dotted 分割线。</Text>
</template>

带文字分割线

设置 text 属性可以在分割线上显示文字，并可以通过 orientation 设置文字的位置。

<template>
  <Divider color="primary" text="我是带文字分割线" />
  <Divider color="primary" text="文字在左侧分割线" orientation="left" />
  <Divider color="primary" text="文字在右侧分割线" orientation="right" />
</template>

自定义高度分割线

通过 size 属性可以自定义分割线的高度。

<template>
  <Divider color="primary" text="我是自定义高度的分割线" :size="50" />
</template>

自定义颜色与粗细

通过 color 和 width 属性可以自定义分割线的颜色和粗细。

<template>
  <Divider color="primary" />
  <Text>上面是自定义颜色分割线。</Text>
  <Divider color="primary" :width="5" />
  <Text>上面是自定义粗细分割线。</Text>
</template>

垂直的分割线

设置 type=vertical 使分割线垂直。

<template>
  <FlexRow>
    <Text>垂直的分割线</Text>
    <Divider type="vertical" color="primary" />
    <Text>分割线</Text>
    <Divider type="vertical" color="primary" dashed />
    <Text>垂直的分割线</Text>
  </FlexRow>
</template>

API 参考

Divider

分割线组件。

Props

名称	说明	类型	必填	默认值
dashed	是否虚线	boolean	-	false
dotted	是否虚线 (dotted)	boolean	-	false
color	线的颜色，默认 gray	string	-	grey
backgroundColor	线的背景颜色	string	-	undefined
orientation	分割线标题的位置，默认 center	'left' | 'right' | 'center'	-	'center'
type	水平还是垂直类型	'horizontal' | 'vertical'	-	'horizontal'
text	分割线上面的文字（仅水平状态有效）	string	-	-
textStyle	分割线上面的文字样式	object	-	-
width	分割线宽度	number	-	2
size	容器大小（垂直的时候是宽度，水平的时候是高度）	number	-	36

主题变量

名称	类型	默认值	说明
DividerColor	string	grey	分割线的颜色
DividerBackgroundColor	string	undefined	分割线的背景颜色
DividerWidth	number	2	分割线的宽度
DividerSize	number	36	分割线的容器大小（垂直时为宽度，水平时为高度）