Skip to main content

分割 Space

Space 组件用于在元素之间添加间距，可以灵活设置方向、间距大小和是否换行，适用于布局中的元素间距调整 。

最常用的组件之一。

📦 引入方式​

import { Space } from '@itera-web/react-ui-core';

🧩 使用示例​

📚 水平间距​

Item 1
Item 2
Item 3

📚 垂直间距​

Item 1
Item 2
Item 3

📚 自定义间距大小​

Item 1
Item 2
Item 3

📚 水平排列且换行​

Item 1
Item 2
Item 3
Item 4
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3
Item 3

📚 垂直排列的可换行布局​

Item 1
Item 2
Item 3
Item 4

📚 水平排列并调整间距​

Item 1
Item 2
Item 3

📚 设置独占一行​

Item 1
Item 2
Item 3

📚 设置居中​

Item 1
Item 2
Item 3

🧩 Props​

属性类型默认值说明
direction'horizontal' | 'vertical''horizontal'控制排列方向，horizontal 为水平，vertical 为垂直
sizenumber8控制子元素之间的间距大小（以像素为单位）
type"around" \ "between"""设置 显示形式
blockbooleanfalse是否独占一行
centerbooleanfalse是否居中
wrapbooleanfalse是否允许子元素换行，默认为 false
classNamestring—自定义样式类名

🎨 样式说明​

  • 方向控制：通过 direction 控制子元素的排列方向：
    • horizontal（默认值）：子元素水平排列，设置水平间距。
    • vertical：子元素垂直排列，设置垂直间距。
  • 间距控制：size 属性控制子元素之间的间距，单位为像素。
  • 换行控制：通过设置 wrap={true}，允许子元素换行，适用于响应式布局。

🎯 设计说明​

  • 灵活的布局：Space 组件通过控制方向、间距和换行，使得在布局中管理元素间距更加灵活。
  • 简洁易用：只需传入简单的配置项即可完成复杂的布局调整，符合 UI 设计的基本需求。
  • 响应式支持：支持换行和灵活的间距调整，适应不同屏幕和布局需求。