Магазин

Для бизнеса

The v-card component is a versatile component that can be used for anything from a panel to a static image. The card component has numerous helper components to make markup as easy as possible. Components that have no listed options use Vue's functional component option for faster rendering and serve as markup sugar to make building easier.

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

Options
  • 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.

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

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

The v-card component is useful for wrapping content.

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.

Используя v-flex, вы можете создавать настраиваемые горизонтальные карты. Используйте свойство contain, чтобы сжать v-card-media, чтобы поместиться внутри контейнера вместо перекрытия.

С помощью простого условия вы можете легко добавить дополнительный текст, который скрыт до открытия.

Компонент v-card поддерживает много дочерних компонентов, которые помогут вам создавать сложные карточки, не беспокоясь об отступах. Этот пример использует компоненты v-card-title, v-card-text и v-card-actions.

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.

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.

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

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!