Card
Компонент v-card - это универсальный компонент, который может использоваться для чего угодно: от панели до статического изображения. Компонент card имеет множество вспомогательных компонентов, чтобы сделать разметку максимально простой. Компоненты, которые не имеют перечисленных опций, используют функциональный компонент Vue для ускоренного рендеринга и служат в качестве простой разметки, чтобы упростить компоновку элементов.
v-card-media is deprecated, use v-img instead.
API
Класс связан, когда компонент активен. warning В зависимости от компонента это может вызвать побочные эффекты. Если вам нужно добавить собственный класс поверх значения по умолчанию, просто выполните active-class="default-class your-class"
Vue Router router-link
Применяет заданный цвет к элементу управления
Применяет тёмный вариант темы
Элемент маршрута отключён
Применяет значение эффекта подъёма от 0 до 24
Точно сопоставьте ссылку. Без этого «/» будет соответствовать каждому маршруту
Vue Router router-link
Удаляет тень карты
Вручную укажите высоту карты
Применить более высокий уровень при наведении
Обозначает тег компонента <a>
Задаёт фон изображения
Применяет светлый вариант темы
Устанавливает максимальную высоту для содержимого
Устанавливает максимальную ширину для содержимого
Components.Cards.
Components.Cards.
Указывает, что ссылка является nuxt-link
Задаёт более высокий уровень по умолчанию
Vue Router router-link
Применяет директиву v-ripple
Укажите настраиваемый тег для использования в компоненте
Укажите целевой атрибут, работает только с тегом привязки.
Поверните карту в плитку, удалив радиус границы
Обозначает тег компонента <router-link>
Ширина содержимого
Примеры
Медиа с текстом
Используя систему компоновки, мы можем добавить пользовательский текст в любом месте фона.
Горизонтальные карты
Используя v-flex, вы можете создавать настраиваемые горизонтальные карты. Используйте свойство contain, чтобы сжать v-card-media, чтобы поместиться внутри контейнера вместо перекрытия.
Grids
Используя сетки, вы можете создавать красивые макеты.
Пользовательские действия
С помощью простого условия вы можете легко добавить дополнительный текст, который скрыт до открытия.
Пост Twitter
Компонент v-card поддерживает много дочерних компонентов, которые помогут вам создавать сложные карточки, не беспокоясь об отступах. Этот пример использует компоненты v-card-title, v-card-text и v-card-actions.