Divider - Semi Design Next

Demos

How to import

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

Basic Usage

水平实线

Semi Design 是一个设计系统。

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

水平虚线

Semi Design 是一个设计系统。

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

垂直实线

左

中

右

垂直虚线

左

中

右

Code

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

export default function DividerDemo() {
    return (
        <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 layout="vertical" dashed margin="12px" />
                <span>中</span>
                <Divider layout="vertical" dashed margin="12px" />
                <span>右</span>
            </div>
        </div>
    );
}

With Children

这是居左文字

这是居中文字

这是居右文字

Code

import { IconSemiLogo } from '@fibrous/semi-icons-react';
import { Divider } from '@fibrous/semi-ui-react';

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 Reference

Props

Property	Description	Type	Default
align	Alignment of the content when the divider has content: `left`, `center` or `right`.	`'left' \| 'right' \| 'center'`	`"center"`
children	Content shown in a horizontal divider; a vertical divider shows no content.	`ReactNode`	-
className	Class name of the root element.	`string`	-
dashed	Whether the line is dashed.	`boolean`	-
layout	Direction of the divider: `horizontal` or `vertical`.	`'horizontal' \| 'vertical'`	`"horizontal"`
margin	Margin above and below the divider, or left and right when `layout` is `vertical`. A number is in pixels.	`number \| string`	-
ref	Reference to the root `div` element.	`Type`	-
style	Style of the root element.	`CSSProperties`	-

id, onClick, role, aria-* and other native attributes land on the root element. The default role is separator, which is not set when the divider has content; a role you pass overrides the default.

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$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	分割线文字字重