Card
Card
は、関連する情報をグループ化して表示するコンポーネントです。デフォルトでは、section
要素をレンダリングします。
インポート
import { Card, CardHeader, CardBody, CardFooter } from "@yamada-ui/react"
Card
: カードのラッパーコンポーネントです。CardHeader
: カードのヘッダーを表示するコンポーネントです。CardBody
: カードのメインコンテンツを表示するコンポーネントです。CardFooter
: カードのフッターを表示するコンポーネントです。
使い方
編集可能な例
<Card> <CardHeader> <Heading size="md">『SLAM DUNK』(スラムダンク)</Heading> </CardHeader> <CardBody> <Text> 『SLAM DUNK』(スラムダンク)は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。 </Text> </CardBody> </Card>
バリアントを変更する
編集可能な例
<VStack> <For each={["elevated", "outline", "subtle", "solid"]}> {(variant, index) => ( <Card key={index} variant={variant}> <CardHeader> <Heading size="md">『SLAM DUNK』(スラムダンク)</Heading> </CardHeader> <CardBody> <Text> 『SLAM DUNK』(スラムダンク)は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。 </Text> </CardBody> </Card> )} </For> </VStack>
サイズを変更する
編集可能な例
<VStack> <For each={["sm", "md", "normal", "lg"]}> {(size, index) => ( <Card key={index} size={size}> <CardHeader> <Heading size="md">『SLAM DUNK』(スラムダンク)</Heading> </CardHeader> <CardBody> <Text> 『SLAM DUNK』(スラムダンク)は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。 </Text> </CardBody> </Card> )} </For> </VStack>
カラースキームを変更する
編集可能な例
<VStack> <For each={[ { variant: "subtle", colorScheme: "green" }, { variant: "solid", colorScheme: "pink" }, ]} > {({ variant, colorScheme }, index) => ( <Card key={index} variant={variant} colorScheme={colorScheme}> <CardHeader> <Heading size="md">『SLAM DUNK』(スラムダンク)</Heading> </CardHeader> <CardBody> <Text> 『SLAM DUNK』(スラムダンク)は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。 </Text> </CardBody> </Card> )} </For> </VStack>
レイアウトをカスタマイズする
編集可能な例
<Card maxW="md"> <CardHeader justifyContent="center"> <Image src="https://slamdunk-movie.jp/files/images/p_gallery_03.jpg" w="full" rounded="md" /> </CardHeader> <CardBody> <Heading size="md">『SLAM DUNK』(スラムダンク)</Heading> <Text> 『SLAM DUNK』(スラムダンク)は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。 </Text> </CardBody> <CardFooter> <Button colorScheme="primary">Wikipedia</Button> </CardFooter> </Card>
編集可能な例
<Card direction={{ base: "row", md: "column" }} overflow="hidden" variant="outline" > <Image src="https://slamdunk-movie.jp/files/images/p_gallery_03.jpg" objectFit="cover" maxW={{ base: "30%", md: "100%" }} /> <VStack gap="0"> <CardHeader> <Heading size="md">『SLAM DUNK』(スラムダンク)</Heading> </CardHeader> <CardBody> <Text> 『SLAM DUNK』(スラムダンク)は、バスケットボールを題材にした井上雄彦による日本の漫画作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。 </Text> </CardBody> <CardFooter> <Button colorScheme="primary">Wikipedia</Button> </CardFooter> </VStack> </Card>
GitHubでこのページを編集する