Skip to content

Space 间距 ​

统一子元素间距,支持水平、垂直、换行和分割元素。

交互演示 React

亲手试一试,更容易理解。

在当前页面运行 Space 间距 的交互示例。

交互指南 ​

  1. 切换排列方向。
  2. 开关换行与分割线。
  3. 使用加减按钮在 10–50 范围内调整间距。

在项目中运行 ​

点击本页的“运行演示”,或在独立窗口中体验示例。也可在 src 下的页面中直接挂载现有演示:

tsx
import Example from "./components/space/SpaceDemo";

export default function ExamplePage() {
  return <Example />;
}

API 与实现要点 ​

名称类型或形式说明
directionhorizontal / vertical排列方向
sizenumber子元素间距
wrapboolean是否允许换行
splitReactNode插入子元素之间的分隔内容

使用边界 ​

可以用本目录 ConfigProvider 的 space.size 提供共享间距。示例分割线尺寸是固定的,业务中应按内容调整。

源码位置 ​

  • 演示入口:src/components/space/SpaceDemo.tsx
  • 相关实现:src/components/space

在实践中理解 React,在分享中共同成长。