カード
カードは、単一の主題に関するコンテンツをまとめて表示するコンテナとなるコンポーネントです。
import { Card } from "@/components/ui/card";使用例
縦レイアウト
import Image from "next/image";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
export default function App() {
return (
<Card.Root maxWidth="md">
<Card.Image>
<Image src="/IMG_7224.jpg" alt="Kiyomizu" width={640} height={400} />
</Card.Image>
<Card.Main>
<Card.Title>清水寺</Card.Title>
<p>
清水寺は、京都市東山区清水1丁目にある北法相宗の大本山の寺院。山号は音羽山。本尊は十一面千手観世音菩薩。
</p>
</Card.Main>
<Card.Sub display="flex" alignItems="end" justifyContent="end" gap={2}>
<Button variant="outline">キャンセル</Button>
<Button>送信</Button>
</Card.Sub>
</Card.Root>
);
}
横レイアウト
<Card.Root>にorientation="horizontal"を設定する
import Image from "next/image";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
export default function App() {
return (
<Card.Root orientation="horizontal">
<Card.Image>
<Image src="/IMG_7224.jpg" alt="Kiyomizu" width={640} height={400} />
</Card.Image>
<Card.Main>
<Card.Title>清水寺</Card.Title>
<p>
清水寺は、京都市東山区清水1丁目にある北法相宗の大本山の寺院。山号は音羽山。本尊は十一面千手観世音菩薩。
</p>
</Card.Main>
<Card.Sub display="flex" alignItems="end" justifyContent="end" gap={2}>
<Button variant="outline">キャンセル</Button>
<Button>送信</Button>
</Card.Sub>
</Card.Root>
);
}
リンク
<Card.Root>にasLink属性を付与すると、ホバー時にインタラクションが加わる。このとき、通常<Card.Title>にasChild属性を付与し、子要素のリンクと合成して使用する。
import Image from "next/image";
import { css } from "styled-system/css";
import { Card } from "@/components/ui/card";
import { Link } from "@/components/link";
const data = [
{
name: "cieloazul310",
name_en: "cieloazul310",
url: "https://cieloazul310.github.io",
image: "/IMG_0839.png",
},
{
name: "那珂川緑波",
name_en: "Roppa NAKAGAWA",
url: "https://github.com/cieloazul310",
image: "/IMG_0891.jpg",
},
{
name: "ショスタコおもち",
name_en: "Shostakomochi",
url: "https://qiita.com/cieloazul310",
image: "/IMG_1568.jpg",
},
];
export default function App() {
return (
<div
className={css({
display: "grid",
gridTemplateColumns: { base: "1fr", sm: "repeat(3, 1fr)" },
gridAutoRows: "auto",
gap: 4,
})}
>
{data.map(({ name, name_en, url, image }) => (
<Card.Root asLink key={name}>
<Card.Image aspectRatio={4 / 3}>
<Image src={image} alt="Link" width={640} height={400} />
</Card.Image>
<Card.Main>
<hgroup>
<p>{name_en}</p>
<Card.Title asChild>
<Link href={url}>{name}</Link>
</Card.Title>
</hgroup>
</Card.Main>
</Card.Root>
))}
</div>
);
}