分割线 Divider

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

import { Divider } from '@itera-web/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>

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

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