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

使い方

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

Options

API

サンプル

Outlined cards

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

Intermediate

The v-card component is useful for wrapping content.

Information card

Cards are entry points to more detailed information. To keep things concise, ensure to limit the number of actions the user can take.

テキスト付きメディア

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

グリッド

Using grids, you can create beautiful layouts.

水平型Card

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

カスタムアクション

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

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.

Loading card

Cards can be set to a loading state when processing a user action. This disables further actions and provides visual feedback with an indeterminate v-progress-linear.

Weather card

Using v-list-items and a v-slider, we are able to create a unique weather card. The list components ensure that we have consistent spacing and functionality while the slider component allows us to provide a useful interface of selection to the user.

Advanced

Using v-list-item and v-img allows us to create unique card layouts in an advanced setting

Edit this page on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise