ItemGroup

使用法

ItemGroup は Item サブコンポーネント と組み合わせて使用する必要があります。

import {
   __experimentalItemGroup as ItemGroup,
   __experimentalItem as Item,
} from '@wordpress/components';
function Example() {
   return (
   <ItemGroup>
   <Item>Code</Item>
   <Item>is</Item>
   <Item>Poetry</Item>
   </ItemGroup>
   );
}

プロパティ

isBordered: boolean

各アイテムの周りに境界線を描画します。

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

isRounded: boolean

角が丸い形で描画します。

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

isSeparated: boolean

アイテムを個別に描画します。 isBordered が false であっても、各アイテムの間に境界線が表示されます。

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

size: ‘small’ | ‘medium’ | ‘large’

コンポーネント内のパディングの量を決定します。

定義されていない場合、デフォルトではコンテキストからの値（デフォルトでは medium）が使用されます。

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

コンテキスト

Item サブコンポーネント は コンテキスト を使用して <ItemGroup /> に接続されています。したがって、Item は ItemGroup 親コンポーネントから size プロパティを受け取ります。

次の例では、<Item /> は small のサイズで描画されます:

import {
   __experimentalItemGroup as ItemGroup,
   __experimentalItem as Item,
} from '@wordpress/components';
const Example = () => (
   <ItemGroup size="small">
   <Item>Item text</Item>
   </ItemGroup>
);