Space
Set the spacing between components.
Install
npm install @arco-design/web-react@2.66.18
Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.
Examples
- Basic: Basic usage of spacing components.
- Vertical: You can set the spacing in the vertical direction.
- Size: Built-in 4 sizes,
mini-4pxsmall-8px (default)medium-16pxlarge-24px, and also support to pass numbers to customize the size. - Align: There are 4 built-in alignment methods, namely
startcenterendbaseline, and the default iscenterin horizontal mode. - Wrap: Surround type spacing, there are spacing on all sides, generally used in the scene of line wrapping.
- Split: Set separators for adjacent child elements.
Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.
API
Space
| Property | Description | Type | DefaultValue | Version |
|---|---|---|---|---|
| wrap | Whether to wrap line automatic | boolean | - | - |
| align | Alignment of items | 'start' | 'end' | 'center' | 'baseline' | - | - |
| direction | The space direction | 'vertical' | 'horizontal' | horizontal | - |
| split | Set separator | ReactNode | - | 2.22.0 |
| className | Additional css class | string | string[] | - | - |
| size | The space size. ( Array format add in 2.15.0 ) | SpaceSize | SpaceSize[] | small | - |
| style | Additional style | CSSProperties | - | - |
SpaceSize
export type SpaceSize = "mini" | "small" | "medium" | "large" | number;