Taroify

Divider 分割线

用于将内容分隔为多个区域。

import { Divider } from "@taroify/core"

代码演示

默认渲染一条水平分割线。

<Divider />

通过插槽在可以分割线中间插入内容。

<Divider>文本</Divider>

通过 orientation 指定内容所在位置。

<Divider>
  <Divider.Text orientation="left">文字</Divider.Text>
</Divider>
<Divider>
  <Divider.Text orientation="right">文字</Divider.Text>
</Divider>

添加 dashed 属性使分割线渲染为虚线。

<Divider dashed>文本</Divider>

可以使用 className 属性，也可以直接通过 style 属性设置分割线的样式。

<Divider style={{ color: "#1989fa", borderColor: "#1989fa", padding: "0 16px" }}>
  文本
</Divider>

参数	说明	类型	默认值
dashed	是否使用虚线	boolean	`false`
hairline	是否使用 0.5px 线	boolean	`true`

参数	说明	类型	默认值
orientation	内容位置，可选值为 `left` `right`	string	`center`

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。