Card
意味のあるセクション、立体感、内側の余白を備えた構造化コンテンツのサーフェスです。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
variant | default, outlined, elevated | default |
padding | none, sm, md, lg | md |
| パーツ | Root、Header、Title、Description、Content、Footer | 複合 API |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/card.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRCard } from '@tinyrack/ui/components/card';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
内側の余白 パーマリンク
コンテンツの密度に合わせて内側の余白を選びます。子要素をカードの端まで広げる場合だけ none を使用してください。
端まで広がるメディア パーマリンク
メディアをカードの境界まで広げる場合は、外側のカードに padding none を使い、意味のある各セクションに余白を設けます。
意味のある article と見出し パーマリンク
`render` プロパティはラッパー要素を挿入せず、既定の要素を置き換えます。周囲のページと見出しレベルを揃えます。
API
| パート | 既定の要素 | 主なプロパティ |
|---|---|---|
TRCard.Root | div | variant, padding, render |
TRCard.Header | header | ネイティブの header プロパティ |
TRCard.Title | h2 | 文脈に合う見出しレベルへ変更するための render |
TRCard.Description | p | ネイティブの段落プロパティ |
TRCard.Content | div | ネイティブの div プロパティ |
TRCard.Footer | footer | ネイティブの footer プロパティ |
TRCard.Root と TRCard.Title は、ラッパー要素を追加しない Base UI の加算型 render コントラクトをサポートします。すべてのパートは className をマージし、ネイティブプロパティと ref を転送して、利用側のスタイルを受け取ります。カードを構成するときは見出しの文書順を守り、子要素をカードの端まで広げる場合にのみ padding="none" を使用してください。