Skip to content
快速前往

Divider 分割线

  • 区隔内容的分割线

何时使用

  • 对不同段落的文本进行分割。

Divider基本用法

基础用法: 对段落的文本进行分割。
虚线
自定义分割线颜色
自定义文案
北京
在左侧的自定义文案
上海
在右侧的自定义文案
广州
文案的颜色
广州
文案的背景颜色
广州
垂直的分割线
北京
上海
成都
Divider 示例
<template>
  <div>
    基础用法: 对段落的文本进行分割。
    <c-divider></c-divider>

    虚线
    <c-divider border-style='dashed'></c-divider>

    自定义分割线颜色
    <c-divider color='#7693f5'></c-divider>

    自定义文案
    <c-divider>北京</c-divider>

    在左侧的自定义文案
    <c-divider content-position='left'>上海</c-divider>

    在右侧的自定义文案
    <c-divider content-position='right'>广州</c-divider>

    文案的颜色
    <c-divider content-color='#7693f5'>广州</c-divider>

    文案的背景颜色
    <c-divider content-background-color='#7693f5'>广州</c-divider>

    垂直的分割线
    <div>
      北京
      <c-divider direction='vertical'></c-divider>
      上海
      <c-divider direction='vertical' border-style='dashed'></c-divider>
      成都
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  setup() {
    return {
      msg: 'Divider 分割线 组件文档示例'
    }
  }
})
</script>

<style>

</style>

Divider参数

参数类型默认说明
colorstring--设置分割线的颜色
directionDirectionTypehorizontal设置分割线方向
border-styleBorderStyleTypesolid设置分隔符样式
content-positionContentPositionTypecenter设置分割线文案的位置
content-colorstring--设置分割线文案的颜色
content-background-colorstring--设置分割线文案的背景颜色

Divider类型定义

DirectionType

ts
export type DirectionType = 'horizontal' | 'vertical';

BorderStyleType

ts
export type BorderStyleType = 'dashed' | 'solid';

ContentPositionType

ts
export type ContentPositionType = 'left' | 'right' | 'center';

Released under the MIT License.