Card

使用法

Card は、CardBody、CardHeader、CardFooter などの便利な サブコンポーネント のセットを提供します（以下を参照）。

import {
   Card,
   CardHeader,
   CardBody,
   CardFooter,
   __experimentalText as Text,
   __experimentalHeading as Heading,
} from '@wordpress/components';
function Example() {
   return (
   <Card>
   <CardHeader>
   <Heading level={ 4 }>Card Title</Heading>
   </CardHeader>
   <CardBody>
   <Text>Card Content</Text>
   </CardBody>
   <CardFooter>
   <Text>Card Footer</Text>
   </CardFooter>
   </Card>
   );
}

プロパティ

elevation: number

スタイルシステムのエレベーションシステムに基づくエレベーションシャドウのサイズです。特定のコンテンツを強調表示するのに役立つ場合があります。詳細については、Elevationを確認してください。

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

isBorderless: boolean

境界線なしでレンダリングします。

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

isRounded: boolean

角が丸い形でレンダリングします。

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

size: string

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

• 必須: いいえ
• デフォルト: medium
• 許可される値: xSmall、small、medium、large
  

継承されたプロパティ

Card は、すべての Surface プロパティ を継承します。

サブコンポーネント

このコンポーネントは、さまざまなインターフェースを構成するために使用できるサブコンポーネントのコレクションを提供します。

• <CardBody />
• <CardDivider />
• <CardFooter />
• <CardHeader />
• <CardMedia />
  

サブコンポーネントの例

import {
   Card,
   CardBody,
   CardDivider,
   CardFooter,
   CardHeader,
   CardMedia,
} from '@wordpress/components';
const Example = () => (
   <Card>
   <CardHeader>...</CardHeader>
   <CardBody>...</CardBody>
   <CardDivider />
   <CardBody>...</CardBody>
   <CardMedia>
   <img src="..." />
   </CardMedia>
   <CardFooter>...</CardFooter>
   </Card>
);

コンテキスト

<Card /> のサブコンポーネントは、コンテキストを使用して <Card /> に接続されています。size や isBorderless のような特定のプロパティは、一部のサブコンポーネントに渡されます。

次の例では、<CardBody /> は small のサイズでレンダリングされます:

import { Card, CardBody } from '@wordpress/components';
const Example = () => (
   <Card size="small">
   <CardBody>...</CardBody>
   </Card>
);

これらのサブコンポーネントは柔軟性を持つように設計されています。コンテキストプロパティは、必要に応じてサブコンポーネントによってオーバーライドできます。次の例では、最後の <CardBody /> は指定されたサイズでレンダリングされます:

import { Card, CardBody } from '@wordpress/components';
const Example = () => (
   <Card size="small">
   <CardBody>...</CardBody>
   <CardBody>...</CardBody>
   <CardBody size="large">...</CardBody>
   </Card>
);