分割线

分隔内容区域并分离模块。

导入

import { Divider } from "@resolid/react-ui";

用法

颜色

外观

分割线有三种不同的外观可供使用。通过传递 variant 属性，可以选择使用 solid、dotted 或 dashed 中的任意一种。

<Divider variant={"solid"} />
<Divider variant={"dotted"} />
<Divider variant={"dashed"} />

颜色

通过传递 color 属性来更改分隔线的颜色。分隔线支持 primary、success、warning、danger 和 neutral 这些颜色。

<Divider color={"primary"} />
<Divider color={"success"} />
<Divider color={"warning"} />
<Divider color={"danger"} />
<Divider color={"neutral"} />

大小

分隔线使用 ${size}px 来设置大小，大小应为数字。

<Divider size={2} />
<Divider size={3} />
<Divider size={5} />

垂直分割线

文字文字文字文字文字文字文字
<span>文字</span>
<Divider vertical/>
<span>文字</span>
<Divider vertical variant="dashed"/>
<span>文字</span>
<Divider vertical variant="dotted"/>
<span>文字</span>
<Divider vertical color={'primary'}/>
<span>文字</span>
<Divider vertical size={3} color={'success'} variant="dotted"/>
<span>文字</span>
<Divider vertical size={2} color={'danger'} variant="dashed"/>
<span>文字</span>

文本标签

<Divider>分割线</Divider>
<Divider position={'left'} variant="dashed">
  分割线
</Divider>
<Divider variant="dotted">分割线</Divider>
<Divider color={'primary'}><SpriteIcon size={"0.813rem"} className={'mr-1'} name={"search"} /> 分割线</Divider>
<Divider position={'right'} size={3} color={'success'} variant="dotted">
  分割线
</Divider>
<Divider size={2} color={'danger'} variant="dashed">
  <a href={'#text-label'} className={'text-link hover:text-link-hovered hover:underline'}>
    链接分割线
  </a>
</Divider>

属性

属性color类型"primary" | "neutral" | "success" | "warning" | "danger"默认值"neutral"必须false
属性variant类型"solid" | "dashed" | "dotted"默认值"solid"必须false
属性size类型number默认值1必须false
属性vertical类型boolean默认值false必须false
属性position类型"center" | "left" | "right"默认值"center"必须false