组件 · 布局
Space 间距
子元素间距容器。
使用建议
- 避免：与 Flex gap 重复嵌套造成双倍空白
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
引入
tsx
import {
Space,
SpaceAddon,
SpaceCompact,
useSpaceCompact,
} from '@selrux/ui/space';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
基础用法
设置子元素之间的间距。
分隔符与纵向
separator 插入分隔内容，vertical 纵向排列。
紧凑组合
Space.Compact 让输入框与按钮贴合为一个整体。
方向、对齐与换行
orientation、reverse、inline、align、justify、wrap。
inline
vertical
紧凑组合
SpaceCompact 的 orientation / vertical、block 撑满、size。
API
属性覆盖：示例用到 13 / 13 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
Space
复合导出：Space.Compact / Space.Addon。
静态成员：Space.Compact Space.Addon
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
orientation | 主轴方向；优先于 vertical。 | "horizontal" | "vertical" | - |
vertical | 便捷布尔；为 true 且未设 orientation 时视为垂直。 | boolean | - |
reverse | 主轴反向。 | boolean | - |
inline | 使用 inline-flex。 | boolean | - |
size | 子项间距。 | SpaceSize | - |
align | 交叉轴对齐；水平未设时为 center。 | Property.AlignItems | - |
justify | 主轴对齐。 | Property.JustifyContent | - |
wrap | 是否换行；仅水平方向有意义。 | boolean | - |
separator | 子项之间的分隔节点。 | ReactNode | - |
children | 子节点。 | ReactNode | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
SpaceAddon
Compact 内自定义单元格。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 单元格内容。 | ReactNode | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
SpaceCompact
主题化紧凑组合。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
orientation | 主轴方向；优先于 vertical。 | "horizontal" | "vertical" | - |
vertical | 垂直简写。 | boolean | - |
block | 占满父宽。 | boolean | - |
size | 子控件尺寸上下文。 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
children | 子节点。 | ReactNode | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
导出类型：SpaceAddonProps、SpaceCompactControlSize、SpaceCompactProps、SpaceOrientation、SpaceProps、SpaceSize、SpaceSizeTier、SpaceSizeValue
函数与常量
| 名称 | 说明 | 签名 / 类型 |
|---|---|---|
useSpaceCompact | 读取最近 Compact 上下文；组外返回 null。 | () => SpaceCompactContextValue | null |