分割组 DriverGroup
DriverGroup 是一个布局辅助组件，用于将多个子元素分隔开，并自动插入分隔线。可水平或垂直排列，适合用于按钮组、字段展示组等需要视觉分隔的场景。
📦 引入方式
import { DriverGroup } from '@npmqg/react-ui-drivergroup';
🧩 使用示例
📚 水平排列（默认）
- 示例
- 源码
<DriverGroup>
<Button>按钮 1</Button>
<Button>按钮 2</Button>
<Button>按钮 3</Button>
</DriverGroup>
📚 垂直排列
- 示例
- 源码
项 A
项 B
<DriverGroup type="vertical">
<div>项 A</div>
<div>项 B</div>
</DriverGroup>
📚 支持 Fragment 嵌套
- 示例
- 源码
<DriverGroup>
<>
<Button>1</Button>
<Button>2</Button>
</>
<Button>3</Button>
</DriverGroup>
🧩 Props
| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
children | React.ReactNode | — | 需要渲染的子组件，支持嵌套 Fragment |
className | string | '' | 额外样式类名 |
type | 'horizontal' | 'vertical' | 'horizontal' | 分隔方向，控制分隔线方向 |
style | React.CSSProperties | {} | 自定义内联样式 |
🧠 实现特点
- ✅ 自动过滤
null、undefined等无效节点 - ✅ 自动解析 Fragment，递归展开其内部元素
- ✅ 第一个元素不插入分隔线
- ✅ 支持自定义样式与方向控制
🧱 组件结构说明
Divider是插入在元素之间的分隔线组件，内部由props控制样式（可通过传递type）
📌 注意事项
- 组件不会在只有一个子元素时插入分隔线。
children中建议避免嵌套条件渲染逻辑过于复杂，保持结构清晰。- 如需自定义分隔线样式，请修改或扩展 Divider 组件。