使用法

Spacer は、marginpadding を調整するための一連のショートハンドプロパティを提供します。これらのプロパティの値は、ライブラリのグリッドシステム(4px の基準)に対する乗数として機能します。

  1. import {
  2. __experimentalSpacer as Spacer,
  3. __experimentalHeading as Heading,
  4. __experimentalView as View,
  5. } from '@wordpress/components';
  6. function Example() {
  7. return (
  8. <View>
  9. <Spacer>
  10. <Heading>WordPress.org</Heading>
  11. </Spacer>
  12. <Text>Code is Poetry</Text>
  13. </View>
  14. );
  15. }

プロパティ

children: ReactNode

子要素。

  • 必須: いいえ

margin: number

すべてのマージンを調整します。

  • 必須: いいえ

marginBottom: number

下部マージンを調整し、より一般的な marginmarginY プロパティの値を上書きする可能性があります。

  • 必須: いいえ
  • デフォルト: 2

marginLeft: number

左マージンを調整し、より一般的な marginmarginX プロパティの値を上書きする可能性があります。

  • 必須: いいえ

marginRight: number

右マージンを調整し、より一般的な marginmarginX プロパティの値を上書きする可能性があります。

  • 必須: いいえ

marginTop: number

上部マージンを調整し、より一般的な marginmarginY プロパティの値を上書きする可能性があります。

  • 必須: いいえ

marginX: number

左と右のマージンを調整し、より一般的な margin プロパティの値を上書きする可能性があります。

  • 必須: いいえ

marginY: number

上部と下部のマージンを調整し、より一般的な margin プロパティの値を上書きする可能性があります。

  • 必須: いいえ

padding: number

すべてのパディングを調整します。

  • 必須: いいえ

paddingBottom: number

下部パディングを調整し、より一般的な paddingpaddingY プロパティの値を上書きする可能性があります。

  • 必須: いいえ

paddingLeft: number

左パディングを調整し、より一般的な paddingpaddingX プロパティの値を上書きする可能性があります。

  • 必須: いいえ

paddingRight: number

右パディングを調整し、より一般的な paddingpaddingX プロパティの値を上書きする可能性があります。

  • 必須: いいえ

paddingTop: number

上部パディングを調整し、より一般的な paddingpaddingY プロパティの値を上書きする可能性があります。

  • 必須: いいえ

paddingX: number

左と右のパディングを調整し、より一般的な padding プロパティの値を上書きする可能性があります。

  • 必須: いいえ

paddingY: number

上部と下部のパディングを調整し、より一般的な padding プロパティの値を上書きする可能性があります。

  • 必須: いいえ