v-card コンポーネントは、パネルから画像まであらゆる用途に使用できる汎用的なコンポーネントです。card コンポーネントには、可能な限りマークアップを簡単にするためのたくさんのヘルパーコンポーネントが存在します。オプションを持たないコンポーネントはレンダリングを高速化し、構築を簡単にするための糖衣構文として機能するために、Vueのコンポーネント機能を使用しています。
Card には v-card-title, v-card-subtitle, v-card-text, v-card-actionsの4種類のベースとなるコンポーネントが用意されています。
v-card-actions: v-btn や v-menu などのカードの actions を配置するために使用されるコンテナ。また、ボタンに special margin を適用して、ボタンが他のカードコンテンツ領域と適切に並ぶようにします。v-card-subtitle: カードのサブタイトルにデフォルトのfont-sizeとpaddingを提供します。Font-sizeはtypography classesで上書きできます。v-card-text: 主にカードのテキストコンテンツに使用されます。テキストにパディングを適用し、そのフォントサイズを.875remに縮小します。v-card-title: デフォルトのfont-sizeとpaddingをカードのタイトルに提供します。フォントサイズは、typography classes で上書きできます。
以下に、簡単な例から複雑な例まで示します。
An outlined card has 0 elevation and contains a soft border.
v-card コンポーネントは、コンテンツをラップするのに便利です。
カードは、より詳細な情報への入り口です。簡潔にするために、ユーザーが実行できるアクションの数を制限してください。
レイアウトシステムを使用すると、背景のどこにでもカスタムテキストを追加することができます。
グリッドを使用すると、美しいレイアウトを作成することができます。
v-flex を使用することで、カスタマイズされた水平型Cardを作成することができます。v-card-media の contain プロパティを使用すると、コンテナの内側に収まるように縮小することができます。
シンプルな条件によって、開くまで閉じられている補助的なテキストを簡単に追加できます。
v-cardコンポーネントには複数の子コンポーネントがあり、間隔（spacing）を気にせずに複雑な例を作成できます。この例は、v-card-title, v-card-text および v-card-actions コンポーネントで構成されています。
カードは、ユーザーアクションを処理するときに読み込み状態に設定できます。これにより、以降のアクションが無効になり、不確定（indeterminate）な v-progress-linear で視覚的なフィードバックが得られます。
v-list-items と v-slider を使用して、独自のウェザーカードを作成できます。リストコンポーネントにより、一貫した間隔と機能が確保され、スライダーコンポーネントにより、ユーザーに便利な選択インターフェイスを提供できます。
v-list-item と v-img を使用すると、高度な設定でユニークなカードレイアウトを作成できます