Card

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

Usage

A card has 3 basic components, v-card-title, v-card-text and v-card-actions.

v-card-media is deprecated, use v-img instead.

API

props
slots
v-card
Name
active-class
Default
undefined
Type
string

Components.Cards.

Name
append
Default
false
Type
boolean

Components.Cards.

Name
color
Default
undefined
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
disabled
Default
false
Type
boolean

Components.Cards.

Name
elevation
Default
undefined
Type
number | string

Components.Cards.

Name
exact
Default
false
Type
boolean

Components.Cards.

Name
exact-active-class
Default
undefined
Type
string

Components.Cards.

Name
flat
Default
false
Type
boolean

Card の box-shadow を削除します。

Name
height
Default
undefined
Type
number | string

Card の高さを手動で設定します。

Name
hover
Default
false
Type
boolean

ホバーした際により高く浮き出します。

Name
href
Default
undefined
Type
string | object

Components.Cards.

Name
img
Default
undefined
Type
string

背景に設定する画像を設定します。

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
max-height
Default
undefined
Type
number | string

Components.Cards.

Name
max-width
Default
undefined
Type
number | string

Components.Cards.

Name
min-height
Default
undefined
Type
number | string

Components.Cards.

Name
min-width
Default
undefined
Type
number | string

Components.Cards.

Name
nuxt
Default
false
Type
boolean

Components.Cards.

Name
raised
Default
false
Type
boolean

デフォルトで高く浮き出だします。

Name
replace
Default
false
Type
boolean

Components.Cards.

Name
ripple
Default
undefined
Type
boolean | object

Components.Cards.

Name
tag
Default
'div'
Type
string

Components.Cards.

Name
target
Default
undefined
Type
string

Components.Cards.

Name
tile
Default
false
Type
boolean

角丸を削除し、Card をタイルのようにします。

Name
to
Default
undefined
Type
string | object

Components.Cards.

Name
width
Default
undefined
Type
number | string

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.

Edit this page | language on Github
 — Contribution Guide
Vuetify 1 has reached EOL and is no longer actively maintained. Upgrade to Vuetify 2.