React 组件
UGSpace 间距
为相邻内容建立统一间距，支持方向、双轴尺寸、对齐、换行、分隔与填充；复杂页面结构应使用布局组件。
导入方式
按需从包入口导入组件，并在应用入口引入一次样式文件。
tsx
import { UGSpace } from '@ug666/ui-react'基础用法
用于一组相关操作或短内容之间的稳定水平间距。
排列方向
垂直方向适合表单片段和短列表，不承担完整页面布局。
间距大小
预设档位由 --content-gap 派生，会随主题与密度变化；也支持精确数值和双轴间距。
small
项目一
项目二
项目三
default
项目一
项目二
项目三
large
项目一
项目二
项目三
24px
项目一
项目二
对齐
当项目高度不一致时，通过交叉轴对齐明确视觉基线。
start
普通
较高
center
普通
较高
end
普通
较高
baseline
普通
较高
自动换行
水平空间不足时自动换行，并保持行列间距一致。
分隔内容
分隔符用于相关短项之间；它是装饰信息，不替代真正的分割线组件。
概览
成员
设置
文档
示例
API
填充容器
用于同级操作等分可用宽度；不启用时项目宽度由内容决定。
行内间距
inline 模式适合在一段文字内部排列少量状态或元信息。
状态：
已发布刚刚更新
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| direction | 'horizontal' | 'vertical' | 'horizontal' | 设置子元素的排列方向。 |
| align | 'start' | 'center' | 'end' | 'baseline' | 'stretch' | 'center' | 设置交叉轴对齐方式。 |
| size | SpaceSize | 'default' (0.75 × --content-gap) | 设置预设、数值或 [水平, 垂直] 双轴间距；预设档位随主题与密度变化，数值保持精确像素。 |
| wrap | boolean | false | 空间不足时允许水平项目自动换行。 |
| separator | ReactNode | — | 在相邻项目之间插入装饰性分隔内容。 |
| fill | boolean | false | 让子项目按可用空间伸展。 |
| fillRatio | number | 100 | 设置填充项目的初始占比，自动限制在 1 到 100。 |
| inline | boolean | false | 使用 inline-flex，使间距组可嵌入正文。 |
| children | ReactNode | — | 需要统一排列和间距的内容。 |
| 原生属性 | HTMLAttributes<HTMLDivElement> | — | 透传 className、style、aria-*、data-*、事件和 ref。 |