Кнопка
Компонент v-btn заменяет стандартную кнопку html темой material design и множеством опций. Любой цвет вспомогательного класса может использоваться для изменения фона или текста.
API
Позиционировать элемент абсолютно
Класс связан, когда компонент активен. warning В зависимости от компонента это может вызвать побочные эффекты. Если вам нужно добавить собственный класс поверх значения по умолчанию, просто выполните active-class="default-class your-class"
Vue Router router-link
Расширяет кнопку до 100% доступного пространства
Выровнять компонент по нижнему краю
Применяет заданный цвет к элементу управления
Применяет тёмный вариант темы
Удаляет тень кнопки
Элемент маршрута отключён
Точно сопоставьте ссылку. Без этого «/» будет соответствовать каждому маршруту
Vue Router router-link
Делает кнопку круглой
Установите фиксированный элемент
Удаляет цвет фона кнопки
Обозначает тег компонента <a>
Назначает кнопку в виде значка - круглый и плоский
Управляет активным состоянием кнопки
Кнопка большого размера
Выровнять компонент слева
Применяет светлый вариант темы
Добавляет анимацию иконок загрузки
Указывает, что ссылка является nuxt-link
Кнопка будет иметь контур
Vue Router router-link
Выровнять компонент справа
Применяет директиву v-ripple
Кнопка будет круглой по бокам
Кнопка малого размера
Укажите настраиваемый тег для использования в компоненте
Укажите целевой атрибут, работает только с тегом привязки.
Обозначает тег компонента <router-link>
Выровнять компонент в по верхнему краю
Установите атрибут типа кнопки
Контроль видимости
Примеры
Плоские
Плоские кнопки не имеют теней и фона. Только при наведении подсвечивается контейнер для показанной кнопки.
Обычные
Обычные кнопки имеют тень, которая увеличивается при нажатии. Это стиль по умолчанию.
Нажатые
Нажатые кнопки по-прежнему сохраняют свой цвет фона, но не имеют тени.
Варианты раскрывающегося списка кнопок
Выпадающие кнопки являются стандартным выбором с дополнительным стилем.
Иконка
Иконки могут использоваться для основного содержимого кнопки.
Плавающая кнопка действия
Плавающие кнопки действия круглые и обычно содержат иконку.
Загрузчики
Используя загрузку, вы можете уведомить пользователя о том, что происходит обработка. По умолчанию используется компонент v-progress-circle, но это можно настроить.
Определение размеров
Кнопкам можно задавать различные размеры.
Контур
Контур кнопки имеет тот же цвет, что и текущий цвет кнопки.
Круглый
Закруглённые кнопки ведут себя так же, как обычные кнопки, но имеют закруглённые края.
Блок
Кнопки данного типа используют всю доступную ширину.