# Cards
v-cardコンポーネントは、パネルから静的画像まであらゆるものに使用できる汎用性の高いコンポーネントです。 v-card コンポーネントには、マークアップをできるだけ簡単にするためのヘルパー コンポーネントが多数用意されています。 オプションを持たないコンポーネントは、Vue の関数型コンポーネント オプションを使用した高速なレンダリングと、開発を容易にする手軽なマークアップ記法として機能します。
# 使い方
v-card には v-card-title、v-card-subtitle、v-card-text、v-card-actionsの 4 つの基本コンポーネントがあります。
# API
# 関数型コンポーネント
# 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-subtitle
Provides a default font-size and padding for card subtitles. Font-size can be overwritten with typography classes.
# v-card-text
Primarily used for text content in a card. Applies padding for text, reduces its font-size to .875rem.
# v-card-title
Provides a default font-size and padding for card titles. Font-size can be overwritten with typography classes.
# サンプル
# Props
# Loading
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.
# Outlined
An outlined card has 0 elevation and contains a soft border.
# その他
# カードを表示
Using v-expand-transition and a @click event you can have a card that reveals more information once the button is clicked, activating the hidden card to be revealed.
# ラッピングされたコンテンツ
The v-card component is useful for wrapping content.
# カスタムアクション
With a simple conditional, you can easily add supplementary text that is hidden until opened.
# グリッド
Using grids, you can create beautiful layouts.
# 水平型カード
Using v-col, you can create customized horizontal cards. Use the contain property to shrink the v-img to fit inside the container, instead of covering.
# インフォメーションカード
Cards are entry points to more detailed information. To keep things concise, ensure to limit the number of actions the user can take.
# テキスト付きメディア
Using the layout system, we can add custom text anywhere within the background.
# Twitterカード
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.
# お天気カード
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.