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>

垂直

添加 type 属性使分割线垂直展示。

<Divider type='vertical'>文本</Divider>
<Divider type='vertical' dashed>文本</Divider>
<Divider type='vertical' dashed hairline>文本</Divider>
<Divider type="vertical" style={{ color: "#1989fa", borderColor: "#1989fa" }}>
  文本
</Divider>

API

Divider Props

参数	说明	类型	默认值
dashed	是否使用虚线	boolean	`false`
hairline	是否使用 0.5px 线	boolean	`true`
type	水平还是垂直类型	horizontal \| vertical	`horizontal`

Divider.Text Props

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

主题定制

样式变量

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

名称	默认值	描述
--divider-margin	var(--padding-md) 0	-
--divider-vertical-padding	0 var(--padding-xs)	-
--divider-color	var(--gray-6)	-
--divider-font-size	var(--font-size-md)	-
--divider-line-height	24px $hd*	-
--divider-border-color	var(--border-color)	-
--divider-border-width	var(--border-width-base) 0 0	-
--divider-content-padding	var(--padding-md)	-
--divider-content-left-width	10%	-
--divider-content-right-width	10%	-

#Divider 分割线

#介绍

#引入

#代码演示

#基础用法

#展示文字

#内容位置

#虚线

#自定义样式

#垂直

#API

#Divider Props

#Divider.Text Props

#主题定制

#样式变量