Card

Компонент v-card - это универсальный компонент, который может использоваться для чего угодно: от панели до статического изображения. Компонент card имеет множество вспомогательных компонентов, чтобы сделать разметку максимально простой. Компоненты, которые не имеют перечисленных опций, используют функциональный компонент Vue для ускоренного рендеринга и служат в качестве простой разметки, чтобы упростить компоновку элементов.

Применение

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

Имя
active-class
По умолчанию
undefined
Тип
string

Класс связан, когда компонент активен. warning В зависимости от компонента это может вызвать побочные эффекты. Если вам нужно добавить собственный класс поверх значения по умолчанию, просто выполните active-class="default-class your-class"

Имя
append
По умолчанию
false
Тип
boolean

Vue Router router-link

Имя
color
По умолчанию
undefined
Тип
string

Применяет заданный цвет к элементу управления

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
disabled
По умолчанию
false
Тип
boolean

Элемент маршрута отключён

Имя
elevation
По умолчанию
undefined
Тип
number | string

Применяет значение эффекта подъёма от 0 до 24

Имя
exact
По умолчанию
false
Тип
boolean

Точно сопоставьте ссылку. Без этого «/» будет соответствовать каждому маршруту

Имя
exact-active-class
По умолчанию
undefined
Тип
string

Vue Router router-link

Имя
flat
По умолчанию
false
Тип
boolean

Удаляет тень карты

Имя
height
По умолчанию
undefined
Тип
number | string

Вручную укажите высоту карты

Имя
hover
По умолчанию
false
Тип
boolean

Применить более высокий уровень при наведении

Имя
href
По умолчанию
undefined
Тип
string | object

Обозначает тег компонента <a>

Имя
img
По умолчанию
undefined
Тип
string

Задаёт фон изображения

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
max-height
По умолчанию
undefined
Тип
number | string

Устанавливает максимальную высоту для содержимого

Имя
max-width
По умолчанию
undefined
Тип
number | string

Устанавливает максимальную ширину для содержимого

Имя
min-height
По умолчанию
undefined
Тип
number | string

Components.Cards.

Имя
min-width
По умолчанию
undefined
Тип
number | string

Components.Cards.

Имя
nuxt
По умолчанию
false
Тип
boolean

Указывает, что ссылка является nuxt-link

Имя
raised
По умолчанию
false
Тип
boolean

Задаёт более высокий уровень по умолчанию

Имя
replace
По умолчанию
false
Тип
boolean

Vue Router router-link

Имя
ripple
По умолчанию
undefined
Тип
boolean | object

Применяет директиву v-ripple

Имя
tag
По умолчанию
'div'
Тип
string

Укажите настраиваемый тег для использования в компоненте

Имя
target
По умолчанию
undefined
Тип
string

Укажите целевой атрибут, работает только с тегом привязки.

Имя
tile
По умолчанию
false
Тип
boolean

Поверните карту в плитку, удалив радиус границы

Имя
to
По умолчанию
undefined
Тип
string | object

Обозначает тег компонента <router-link>

Имя
width
По умолчанию
undefined
Тип
number | string

Ширина содержимого

Примеры

Медиа с текстом

Используя систему компоновки, мы можем добавить пользовательский текст в любом месте фона.

Горизонтальные карты

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

Grids

Используя сетки, вы можете создавать красивые макеты.

Пользовательские действия

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

Пост Twitter

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

Edit this page | language on Github