ショップ

企業向け

v-card コンポーネントは、パネルから画像まであらゆる用途に使用できる汎用的なコンポーネントです。card コンポーネントには、可能な限りマークアップを簡単にするためのたくさんのヘルパーコンポーネントが存在します。オプションを持たないコンポーネントはレンダリングを高速化し、構築を簡単にするための糖衣構文として機能するために、Vueのコンポーネント機能を使用しています。

Card には v-card-title, v-card-subtitle, v-card-text, v-card-actionsの4種類のベースとなるコンポーネントが用意されています。

Options
  • v-card-actions: v-btnv-menu などのカードの actions を配置するために使用されるコンテナ。また、ボタンに special margin を適用して、ボタンが他のカードコンテンツ領域と適切に並ぶようにします。
  • v-card-subtitle: カードのサブタイトルにデフォルトのfont-sizepaddingを提供します。Font-sizeはtypography classesで上書きできます。
  • v-card-text: 主にカードのテキストコンテンツに使用されます。テキストにパディングを適用し、そのフォントサイズを.875remに縮小します。
  • v-card-title: デフォルトのfont-sizepaddingをカードのタイトルに提供します。フォントサイズは、typography classes で上書きできます。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

An outlined card has 0 elevation and contains a soft border.

v-card コンポーネントは、コンテンツをラップするのに便利です。

カードは、より詳細な情報への入り口です。簡潔にするために、ユーザーが実行できるアクションの数を制限してください。

レイアウトシステムを使用すると、背景のどこにでもカスタムテキストを追加することができます。

グリッドを使用すると、美しいレイアウトを作成することができます。

v-flex を使用することで、カスタマイズされた水平型Cardを作成することができます。v-card-mediacontain プロパティを使用すると、コンテナの内側に収まるように縮小することができます。

シンプルな条件によって、開くまで閉じられている補助的なテキストを簡単に追加できます。

v-cardコンポーネントには複数の子コンポーネントがあり、間隔(spacing)を気にせずに複雑な例を作成できます。この例は、v-card-title, v-card-text および v-card-actions コンポーネントで構成されています。

カードは、ユーザーアクションを処理するときに読み込み状態に設定できます。これにより、以降のアクションが無効になり、不確定(indeterminate)な v-progress-linear で視覚的なフィードバックが得られます。

v-list-itemsv-slider を使用して、独自のウェザーカードを作成できます。リストコンポーネントにより、一貫した間隔と機能が確保され、スライダーコンポーネントにより、ユーザーに便利な選択インターフェイスを提供できます。

v-list-itemv-img を使用すると、高度な設定でユニークなカードレイアウトを作成できます

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!