云策 WordPress 开发者社区

块编辑器开发文档

Spacer

查看官方原文 ↗
💡 云策文档标注

概述

Spacer 是一个实验性的布局组件，用于在组件之间提供内边距（padding）或外边距（margin）空间，并可在 HStack 或 VStack 中自适应调整间距。它基于 WordPress 组件库的网格系统（以 4px 为基准），通过简写属性控制间距。

关键要点

  • Spacer 是实验性组件，可能发生重大变更，使用时需注意兼容性。
  • 提供 margin 和 padding 相关属性，如 margin、marginBottom、paddingX 等，值作为网格系统的倍数。
  • 属性可覆盖更通用的设置，例如 marginBottom 会覆盖 margin 和 marginY。
  • 支持子元素作为 children，用于包裹其他组件。

代码示例

import {
    __experimentalSpacer as Spacer,
    __experimentalHeading as Heading,
    __experimentalView as View,
} from '@wordpress/components';

function Example() {
    return (
        <View>
            <Spacer>
                <Heading>WordPress.org</Heading>
            </Spacer>
            <Text>Code is Poetry</Text>
        </View>
    );
}

注意事项

由于 Spacer 是实验性功能，其 API 和行为可能不稳定，建议在开发中谨慎使用并关注更新。

📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

Spacer is a primitive layout component that providers inner (padding) or outer (margin) space in-between components. It can also be used to adaptively provide space within an HStack or VStack.

Usage

Spacer comes with a bunch of shorthand props to adjust margin and padding. The values of these props work as a multiplier to the library’s grid system (base of 4px).

import {
    __experimentalSpacer as Spacer,
    __experimentalHeading as Heading,
    __experimentalView as View,
} from '@wordpress/components';

function Example() {
    return (
        <View>
            <Spacer>
                <Heading>WordPress.org</Heading>
            </Spacer>
            <Text>Code is Poetry</Text>
        </View>
    );
}

Props

children: ReactNode

The children elements.

  • Required: No

margin: number

Adjusts all margins.

  • Required: No

marginBottom: number

Adjusts bottom margin, potentially overriding the value from the more generic margin and marginY props.

  • Required: No
  • Default: 2

marginLeft: number

Adjusts left margin, potentially overriding the value from the more generic margin and marginX props.

  • Required: No

marginRight: number

Adjusts right margin, potentially overriding the value from the more generic margin and marginX props.

  • Required: No

marginTop: number

Adjusts top margin, potentially overriding the value from the more generic margin and marginY props.

  • Required: No

marginX: number

Adjusts left and right margins, potentially overriding the value from the more generic margin prop.

  • Required: No

marginY: number

Adjusts top and bottom margins, potentially overriding the value from the more generic margin prop.

  • Required: No

padding: number

Adjusts all padding.

  • Required: No

paddingBottom: number

Adjusts bottom padding, potentially overriding the value from the more generic padding and paddingY props.

  • Required: No

paddingLeft: number

Adjusts left padding, potentially overriding the value from the more generic padding and paddingX props.

  • Required: No

paddingRight: number

Adjusts right padding, potentially overriding the value from the more generic padding and paddingX props.

  • Required: No

paddingTop: number

Adjusts top padding, potentially overriding the value from the more generic padding and paddingY props.

  • Required: No

paddingX: number

Adjusts left and right padding, potentially overriding the value from the more generic padding prop.

  • Required: No

paddingY: number

Adjusts top and bottom padding, potentially overriding the value from the more generic padding prop.

  • Required: No