组件
    基础

    分割线

    分割线是一个呈线状的轻量化组件，用于有逻辑的组织元素内容和页面结构或区域。

    代码演示

    如何引入

    import { Divider } from '@fibrous/semi-ui-solid';

    基本用法

    水平实线

    Semi Design 是一个设计系统。它定义了一套中后台设计与前端基础组件。

    水平虚线

    Semi Design 是一个设计系统。它定义了一套中后台设计与前端基础组件。

    垂直实线

    左中右

    垂直虚线

    左中右
    代码
    import { Divider } from '@fibrous/semi-ui-solid';

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

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

            <h3 style={{ 'margin-top': '40px' }}>垂直实线</h3>

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

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

    包含内容

    水平分割线的内容通过 children 传入；垂直分割线不显示内容。

    这是居左文字
    这是居中文字
    这是居右文字
    代码
    import { IconSemiLogo } from '@fibrous/semi-icons-solid';
import { Divider } from '@fibrous/semi-ui-solid';

export default function DividerDemo() {
    return (
        <div>
            <Divider margin="12px" align="left">
                这是居左文字
            </Divider>

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

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

            <Divider margin="12px">
                <IconSemiLogo />
            </Divider>
        </div>
    );
}

    API参考

    Props

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

    class、style、ref 与原生属性（如 role、aria-*）落在根元素上。默认 role 为 separator，带内容时不设置，传入的 role 会覆盖默认值。

    设计变量

    下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。
    Sass 变量值用法
    $spacing-divider_horizontal-marginLeft0px水平模式左间距
    $spacing-divider_horizontal-marginRight0px水平模式右间距
    $spacing-divider_horizontal-marginTop1px水平模式上间距
    $spacing-divider_horizontal-marginBottom1px水平模式下间距
    $spacing-divider_vertical-marginLeft1px垂直模式左间距
    $spacing-divider_vertical-marginRight1px垂直模式右间距
    $spacing-divider_vertical-marginTop0px垂直模式上间距
    $spacing-divider_vertical-marginBottom0px垂直模式下间距
    $spacing-divider_inner_text-paddingLeft8px内容为纯文字时内容左间距
    $spacing-divider_inner_text-paddingRight8px内容为纯文字时内容右间距
    $spacing-divider_inner_text-paddingTop0px内容为纯文字时内容上间距
    $spacing-divider_inner_text-paddingBottom0px内容为纯文字时内容下间距
    $width-divider_inner_text_left_line40px左对齐文字时左间距宽度
    $width-divider_inner_text_right_line40px右对齐文字时右间距宽度
    $width-divider-border1px分割线宽度
    $height-divider_vertical20px垂直分割线高度
    $color-divider_border-colorvar(--semi-color-border)分割线颜色
    $color-divider_text-defaultvar(--semi-color-text-0)标题颜色
    $font-divider_text-weight$font-weight-bold分割线文字字重