Card
コンテンツをグループ化して表示するコンテナコンポーネント。関連する情報をまとめて提示する際に使用します。
Basic
jui-card の最も基本的な使用例です。
関連コンポーネント
ブラウザ対応
このコンポーネントが使用しているブラウザ機能と対応状況です。
| 機能 | 用途 | Chrome | Firefox | Safari | ステータス |
|---|---|---|---|---|---|
::slotted() | ヘッダーやフッター、本文に配置されたコンテンツの配置・スタイル制御 | 53+ | 63+ | 10+ | Baseline 2020 |
| Flexbox | ヘッダーアクションやフッターボタンの配置 | 29+ | 22+ | 9+ | Baseline 2017 |
CSS 変数 (var()) | デザイントークン（影、角丸、背景色等）適用 | 49+ | 31+ | 9.1+ | Baseline 2017 |
💡 いずれの機能も主要ブラウザで広く対応済みです。
Baseline 情報
| 機能 | Baseline 達成 | Widely Available 予定 |
|---|---|---|
::slotted() | 2020年 | 2022年後半 ✅ |
| Flexbox | 2017年 | 2020年前半 ✅ |
| CSS 変数 | 2017年 | 2020年前半 ✅ |
アクセシビリティ
- WAI-ARIA:
- 情報コンテナとしてレイアウトに使用される場合は、スクリーンリーダーによる意味構造には直接影響しません。
clickable="true"（クリッカブルカード）が設定された場合、ルート要素に自動的にtabindex="0"が設定され、キーボードからのフォーカスが可能になります。また、スクリーンリーダー用に対話的であることを示す処理が行われます。
- キーボードナビゲーション:
clickable="true"時は、Tabキーでカードにフォーカスし、EnterまたはSpaceキーでクリックイベントを実行できます。
CSS カスタムプロパティ
このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークンを参照してスタイルが適用されます。
プロパティ
コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
cardTitle | card-title | カードのタイトル | string | undefined | undefined |
clickable | clickable | クリッカブルカード | boolean | false |
padding | padding | 内側余白 | "lg" | "md" | "none" | "sm" | 'md' |
variant | variant | スタイルバリアント | "elevated" | "flat" | "outlined" | 'elevated' |
イベント
コンポーネントから発火するカスタムイベントの一覧です。
| Event | Description | Type |
|---|---|---|
juiCardClick | クリッカブルカードがクリックされた時に発火 | CustomEvent<{ cardTitle?: string | undefined; }> |
スロット
コンポーネント内に子要素を挿入するためのスロット一覧です。
| Slot | Description |
|---|---|
| カード本体（デフォルトスロット） | |
"footer" | フッター（未使用時は自動非表示） |
"header" | カスタムヘッダー（cardTitle と排他） |
"header-actions" | ヘッダー右側のアクション |
"media" | カード上部の画像・メディア |
シャドウパーツ
CSSから直接スタイリング可能な内部要素（Parts）の一覧です。
| Part | Description |
|---|---|
"body" | 本文領域 |
"card" | ルートコンテナ |
"footer" | フッター領域 |
"header" | ヘッダー領域 |
"media" | メディア領域 |
"title" | タイトルテキスト |
Built with StencilJS