コンポーネント
Card
ヘッダー・コンテンツ・フッターを持つカードを表示します。
Create project
Deploy your new project in one click.
使い方
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@murasakijs/ui";<Card>
<CardHeader>
<CardTitle>Card title</CardTitle>
<CardDescription>Card description</CardDescription>
</CardHeader>
<CardContent>Content</CardContent>
<CardFooter>Footer</CardFooter>
</Card>API リファレンス
サブコンポーネント
| コンポーネント | レンダリング内容 |
|---|---|
Card | 外側のボーダー付きコンテナです。 |
CardHeader | CardTitle / CardDescription を縦に並べます。 |
CardTitle | カードの見出しです。 |
CardDescription | タイトル下に表示する控えめな補足テキストです。 |
CardContent | カードの本体部分です。 |
CardFooter | 主にボタンなどのアクションを並べる行です。 |
すべてのサブコンポーネントは HTMLAttributes<HTMLDivElement> を拡張しているため、ネイティブの <div> の props（className・onClick など）をどれにでも渡せます。