Card
v-card コンポーネントは、パネルから画像まであらゆる用途に使用できる汎用的なコンポーネントです。card コンポーネントには、可能な限りマークアップを簡単にするためのたくさんのヘルパーコンポーネントが存在します。オプションを持たないコンポーネントはレンダリングを高速化し、構築を簡単にするための糖衣構文として機能するために、Vueのコンポーネント機能を使用しています。
v-card-media is deprecated, use v-img instead.
API
Components.Cards.
Components.Cards.
コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。
ダークテーマを適用します。
Components.Cards.
Components.Cards.
Components.Cards.
Components.Cards.
Card の box-shadow を削除します。
Card の高さを手動で設定します。
ホバーした際により高く浮き出します。
Components.Cards.
背景に設定する画像を設定します。
ライトテーマを適用します。
Components.Cards.
Components.Cards.
Components.Cards.
Components.Cards.
Components.Cards.
デフォルトで高く浮き出だします。
Components.Cards.
Components.Cards.
Components.Cards.
Components.Cards.
角丸を削除し、Card をタイルのようにします。
Components.Cards.
Components.Cards.
Examples
テキスト付きメディア
レイアウトシステムを使用すると、背景のどこにでもカスタムテキストを追加することができます。
水平型Card
v-flex を使用することで、カスタマイズされた水平型Cardを作成することができます。v-card-media の contain プロパティを使用すると、コンテナの内側に収まるように縮小することができます。
グリッド
グリッドリストを使用すると、美しいレイアウトを作成することができます。
カスタムアクション
シンプルな条件によって、開くまで閉じられている補助的なテキストを簡単に追加できます。
Twitter card
The v-card component has multiple children components that help you build complex examples without having to worry about spacing. This example is comprised of the v-card-title, v-card-text and v-card-actions components.