VStack

使用法

VStack は内部のすべてをレンダリングできます。

import {
   __experimentalText as Text,
   __experimentalVStack as VStack,
} from '@wordpress/components';
function Example() {
   return (
   <VStack>
   <Text>Code</Text>
   <Text>is</Text>
   <Text>Poetry</Text>
   </VStack>
   );
}

プロパティ

alignment: HStackAlignment | CSSProperties[‘alignItems’]

子要素の配置方法を決定します。

• top: コンテンツを上部に揃えます。
• topLeft: コンテンツを上部/左に揃えます。
• topRight: コンテンツを上部/右に揃えます。
• left: コンテンツを左に揃えます。
• center: コンテンツを中央に揃えます。
• right: コンテンツを右に揃えます。
• bottom: コンテンツを下部に揃えます。
• bottomLeft: コンテンツを下部/左に揃えます。
• bottomRight: コンテンツを下部/右に揃えます。
• edge: コンテンツをメイン軸の端まで均等に広げます。
• stretch: コンテンツを交差軸の端まで引き伸ばします。
  

direction: FlexDirection

子要素の流れの方向は direction で調整できます。 column は子要素を垂直に揃え、 row は子要素を水平方向に揃えます。

expanded: boolean

最大の利用可能な幅（横の場合）または高さ（縦の場合）に拡張します。

justify: CSSProperties[‘justifyContent’]

direction が row の場合は水平方向にコンテンツを揃え、 direction が column の場合は垂直方向にコンテンツを揃えます。

下の例では、 flex-start が子要素のコンテンツを左に揃えます。

spacing: CSSProperties[‘width’]

各子要素間のスペースの量。 各子要素の間のスペースは spacing を使用して調整できます。

spacing の値はライブラリのグリッドシステム（4px のベース）に対する乗数として機能します。

wrap: boolean

子要素が折り返すかどうかを決定します。

Spacer

Spacer が VStack 内で使用されると、 Spacer は残りのスペースを取るために適応的に拡張します。

import {
   __experimentalSpacer as Spacer,
   __experimentalText as Text,
   __experimentalVStack as VStack,
} from '@wordpress/components';
function Example() {
   return (
   <VStack>
   <Text>Code</Text>
   <Spacer>
   <Text>is</Text>
   </Spacer>
   <Text>Poetry</Text>
   </VStack>
   );
}

Spacer はアイテムの間に使用して、それらを押し離すこともできます。

import {
   __experimentalSpacer as Spacer,
   __experimentalText as Text,
   __experimentalVStack as VStack,
} from '@wordpress/components';
function Example() {
   return (
   <VStack>
   <Text>Code</Text>
   <Spacer />
   <Text>is</Text>
   <Text>Poetry</Text>
   </VStack>
   );
}