R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

Space 间距容器

Space 现在不再只是“自己写 gap”的占位组件,而是补成了一个完整的布局原语。它使用 Rue 自己干净直接的视觉,不抢内容本身的风头,同时把常用的水平/垂直编排、对齐、换行、分隔符和 Compact 紧凑组合一次覆盖。

何时使用

  • 需要把按钮、标签、统计块、输入控件排成一致的节奏,而不想在每个页面重复手写 gap。
  • 需要在同一套 API 下切换 horizontal、vertical、wrap 和 separator,保持布局表达统一。
  • 需要工具条、搜索栏、批量操作区这类更紧凑的组合时,可以直接切到 Space.Compact。

推荐用法

# 基础间距

最小可用写法,适合动作按钮、标签和轻量操作组。

# 方向与对齐

主轴方向和交叉轴对齐都在 Space 本身表达,不需要额外写 flex 类。

# 尺寸与自定义 Gap

使用 small / middle / large 预设,也支持 tuple 间距覆盖列距与行距。

# 自动换行

用 wrap 处理标签墙、筛选条件和批量状态块,保持行距稳定。

# Separator / Split

分隔符适合 breadcrumb、命令路径和键值对;自定义节点推荐传函数。

# Compact 横向工具条

把输入、筛选和提交动作收成一个连续控制带,适合搜索栏与操作条;Compact 默认就是无间距拼接。

# Compact 按钮拼接

补一组更接近操作面板的按钮拼接示例:图标轨道、主色动作条和带下拉收口的混合按钮组。

  • Report
  • Mail
  • Mobile
  • 1st item
  • 2nd item
  • 3rd item

# Compact 垂直按钮组

再补一组纵向按钮拼接,直接把默认、dashed、primary 和 outlined 四种按钮风格摆在一起。

# Compact 纵向表单

纵向 Compact 更适合移动端或窄侧栏里的批量录入。

# 场景化组合

Space 负责主节奏,Space.Compact 负责局部收口,适合真实工作台头部。

API

属性说明类型默认值
as指定根节点标签或组件,适合 section、nav、article 等语义容器。any'div'
size主轴与交叉轴间距,支持 small / middle / large、数字像素值和 [columnGap, rowGap]。'small' | 'middle' | 'large' | number | string | [SpaceSize, SpaceSize]'small'
direction主轴方向,保持 horizontal / vertical 两种布局。'horizontal' | 'vertical''horizontal'
orientationdirection 的同义增强写法,适合和其他 Rue 组件保持语义一致。'horizontal' | 'vertical'-
vertical纵向快捷开关,传入 true 时直接切为 vertical。booleanfalse
align交叉轴对齐,水平布局默认 center,垂直布局按内容自然拉伸。'start' | 'end' | 'center' | 'baseline' | 'stretch''center'(horizontal)
separator / split在相邻项之间插入分隔内容;自定义节点推荐传函数,确保每次都生成新的分隔符实例。any | (() => any)-
wrap允许水平排列在空间不足时自动换行。booleanfalse
block让容器使用 flex 并占满可用宽度,适合工具条和过滤区。booleanfalse
itemClassName / itemStyle补充每个子项包装层的类名和内联样式,适合卡片、徽标和统计组。string / Record<string, any>-
className / style补充根容器样式。string / Record<string, any>-

Space.Compact API

Space.Compact 对应的是 compact 语义:它负责把控件压成连续组,默认不提供 gap;如果你要的是普通留白,请可以使用 Space。

属性说明类型默认值
as指定根节点标签或组件。any'div'
direction / orientation / verticalCompact 的横向或纵向编排方式。'horizontal' | 'vertical' | boolean'horizontal'
block让 Compact 组占满宽度,适合表单工具条和移动端批量操作。booleanfalse
size用于调整 Compact 壳层的密度,适合文本段、标签组或自定义内容;不会生成子项间距。'small' | 'middle' | 'large' | number | string-
className / style补充根容器样式。string / Record<string, any>-
页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS