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

Usage

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

Functional components

  • v-card-actions: The container used for placing actions for a card, such as v-btn or v-menu. Also applies special margin to buttons so that they properly line up with other card content areas.
  • v-card-text: Primarily used for text content in a card. Applies padding for text, reduces its font-size to .875rem and changes its color to grey.
  • v-card-title: Provides a default font-size and padding for card titles. Font-size can be overwritten with typography classes, (/styles/typography).

API

Examples

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.

テキスト付きメディア

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

グリッド

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

水平型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 | language on Github
Vuetify
StoreFor Enterprise