分割线 - Semi Design Next

代码演示

如何引入

<script setup lang="ts">
    import { Divider } from '@fibrous/semi-ui-vue';
</script>

基本用法

水平实线

Semi Design 是一个设计系统。

它定义了一套中后台设计与前端基础组件。

水平虚线

Semi Design 是一个设计系统。

它定义了一套中后台设计与前端基础组件。

垂直实线

左

中

右

垂直虚线

左

中

右

代码

<script setup lang="ts">
    import { Divider } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <h3>水平实线</h3>
        <span>Semi Design 是一个设计系统。</span>
        <Divider margin="12px" />
        <span>它定义了一套中后台设计与前端基础组件。</span>

        <h3 :style="{ marginTop: '40px' }">水平虚线</h3>
        <span>Semi Design 是一个设计系统。</span>
        <Divider dashed margin="12px" />
        <span>它定义了一套中后台设计与前端基础组件。</span>

        <h3 :style="{ marginTop: '40px' }">垂直实线</h3>

        <div>
            <span>左</span>
            <Divider layout="vertical" margin="12px" />
            <span>中</span>
            <Divider layout="vertical" margin="12px" />
            <span>右</span>
        </div>

        <h3 :style="{ marginTop: '40px' }">垂直虚线</h3>
        <div>
            <span>左</span>
            <Divider dashed layout="vertical" margin="12px" />
            <span>中</span>
            <Divider dashed layout="vertical" margin="12px" />
            <span>右</span>
        </div>
    </div>
</template>

包含内容

水平分割线的内容通过默认插槽传入；垂直分割线不显示内容。

这是居左文字

这是居中文字

这是居右文字

代码

<script setup lang="ts">
    import { IconSemiLogo } from '@fibrous/semi-icons-vue';
    import { Divider } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Divider align="left" margin="12px">这是居左文字</Divider>

        <Divider align="center" margin="12px">这是居中文字</Divider>

        <Divider align="right" margin="12px">这是居右文字</Divider>

        <Divider margin="12px">
            <IconSemiLogo />
        </Divider>
    </div>
</template>

API参考

Props

属性	说明	类型	默认值
align	带内容时内容的对齐方式，可选 left、center、right。	`"left" \| "right" \| "center"`	`semiDefault("Divider", "align", "center")`
margin	分割线上下 margin，垂直方向时为左右 margin；数字按像素处理。	`string \| number`	`semiGlobalDefault("Divider", "margin")`
dashed	是否为虚线。	`boolean`	`semiGlobalDefault("Divider", "dashed")`
layout	分割线方向，可选 horizontal 或 vertical。	`"vertical" \| "horizontal"`	`semiDefault("Divider", "layout", "horizontal")`

Events

事件	说明	回调参数
无

Slots

插槽	说明	作用域参数
default	水平分割线的内容；垂直分割线不显示内容。	`any`

Exposes

名称	说明	类型
无

class、style 与原生属性经 attrs 落在根元素上，可通过 role 覆盖默认的 separator。

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$spacing-divider_horizontal-marginLeft	0px	水平模式左间距
$spacing-divider_horizontal-marginRight	0px	水平模式右间距
$spacing-divider_horizontal-marginTop	1px	水平模式上间距
$spacing-divider_horizontal-marginBottom	1px	水平模式下间距
$spacing-divider_vertical-marginLeft	1px	垂直模式左间距
$spacing-divider_vertical-marginRight	1px	垂直模式右间距
$spacing-divider_vertical-marginTop	0px	垂直模式上间距
$spacing-divider_vertical-marginBottom	0px	垂直模式下间距
$spacing-divider_inner_text-paddingLeft	8px	内容为纯文字时内容左间距
$spacing-divider_inner_text-paddingRight	8px	内容为纯文字时内容右间距
$spacing-divider_inner_text-paddingTop	0px	内容为纯文字时内容上间距
$spacing-divider_inner_text-paddingBottom	0px	内容为纯文字时内容下间距
$width-divider_inner_text_left_line	40px	左对齐文字时左间距宽度
$width-divider_inner_text_right_line	40px	右对齐文字时右间距宽度
$width-divider-border	1px	分割线宽度
$height-divider_vertical	20px	垂直分割线高度
$color-divider_border-color	var(--semi-color-border)	分割线颜色
$color-divider_text-default	var(--semi-color-text-0)	标题颜色
$font-divider_text-weight	$font-weight-bold	分割线文字字重