Divider

间隔内容的分割线

Import: import { Divider } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

何时使用

对不同章节对文本段落进行分割

对行内文字/链接进行分割

基础用法

<Group spacing="xl">
  <Divider style={{ width:'100%' }}/>
</Group>

1
<Group spacing="xl">
2
  <Divider style={{ width:'100%' }}/>
3
</Group>
4

分割线的样式

使用 variant 可以设置分割线的显示形式，默认为 solid (实线)，dotted (点线)，dashed (虚线)

当分割线为垂直方向时，使用 margins 设置分割线左右的外边距

当分割线为水平方向时，使用 margins 设置分割线上下左右的外边距

<Group spacing="xl">
  <Divider style={{ width:'100%'}}/>
  <Divider variant="dotted" margins={20} style={{ width:'100%' }} />
  <Divider variant="dashed" margins={20} style={{ width:'100%' }} />
</Group>

1
<Group spacing="xl">
2
  <Divider style={{ width:'100%'}}/>
3
  <Divider variant="dotted" margins={20} style={{ width:'100%' }} />
4
  <Divider variant="dashed" margins={20} style={{ width:'100%' }} />
5
</Group>
6

分割线的方向

direction 设置分割线的方向，vertical 为垂直方向，horizontal 为水平方向

<Group spacing="xl">
  <Button>1</Button>
  <Divider direction="vertical" margins="sm" />
  <Button>2</Button>
  <Divider direction="vertical" margins="sm" />
  <Button>3</Button>
</Group>

1
<Group spacing="xl">
2
  <Button>1</Button>
3
  <Divider direction="vertical" margins="sm" />
4
  <Button>2</Button>
5
  <Divider direction="vertical" margins="sm" />
6
  <Button>3</Button>
7
</Group>
8

分割线的标签

label 设置分割线的标签名称，labelPosition 设置标签的位置，默认为左侧。

<Group spacing="xl">
   <Divider style={{ width:'100%' }}/>
   <Divider variant="dotted" margins={20} label="label name" style={{ width:'100%' }}/>
   <Divider margins={20} label="label name" labelPosition="right" style={{ width:'100%' }}/>
</Group>

1
<Group spacing="xl">
2
   <Divider style={{ width:'100%' }}/>
3
   <Divider variant="dotted" margins={20} label="label name" style={{ width:'100%' }}/>
4
   <Divider margins={20} label="label name" labelPosition="right" style={{ width:'100%' }}/>
5
</Group>
6

布局

常规

信息录入