分割线 Divider

Divider 是一个用于将内容进行视觉分隔的 React UI 组件，支持水平与垂直方向，适用于文字或模块的分割。 本组件基于 shadcn/ui 风格构建，cn 工具用于动态组合类名，请确保项目中已配置 clsx 或类似工具。

---

📦 引入方式

import { Divider } from '@npmqg/react-ui-core';

// 路径按项目实际情况调整

---

🧩 使用示例

📚 基础用法

示例

源码

<Divider />

📚 带文字的分割线

示例

分割内容

源码

<Divider>分割内容</Divider>

📚 文字左对齐

示例

左对齐

源码

<Divider orientation="left">左对齐</Divider>

📚 文字右对齐

示例

右对齐

源码

<Divider orientation="right">右对齐</Divider>

📚 垂直分割线

示例

左侧

右侧

源码

<div className="flex h-10">
  <span>左侧</span>
  <Divider type="vertical" />
  <span>右侧</span>
</div>

---

🧩 Props

属性名	类型	默认值	描述
type	'horizontal' | 'vertical'	'horizontal'	分割线方向
orientation	'left' | 'center' | 'right'	'center'	仅在 type="horizontal" 且有 children 时生效，用于控制文本位置
children	React.ReactNode	undefined	可选的文本内容
className	string	-	追加自定义 class 样式
其余属性	React.HTMLAttributes<HTMLDivElement>	-	支持所有 <div> 标签支持的原生属性

---

✨ 特性

• 支持水平（默认）和垂直方向的分割线
• 支持三种文字对齐方式：左对齐、居中、右对齐
• 可以插入自定义文本内容
• 可扩展 div 的所有原生属性

---

🧱 样式说明

• 水平分割线使用 Tailwind 类：
  • flex items-center 使文本与线条垂直居中对齐
  • text-muted-foreground 与 text-sm 控制文本样式
  • bg-border 代表统一风格的线条颜色
• 垂直分割线固定宽度为 1px，高度撑满容器高度（h-full） 你可以使用 className 传入自定义样式覆盖默认样式。

---

🧪 兼容性与可访问性

• Divider 本质为 <div> 元素，无特定交互行为，适配性好
• 可配合 aria 属性使用（如 role="separator"）以增强可访问性