Кнопка

Компонент v-btn заменяет стандартную кнопку html темой material design и множеством опций. Любой цвет вспомогательного класса может использоваться для изменения фона или текста.

API

v-btn
Имя
absolute
По умолчанию
false
Тип
boolean

Позиционировать элемент абсолютно

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

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

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

Vue Router router-link

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

Расширяет кнопку до 100% доступного пространства

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

Выровнять компонент по нижнему краю

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

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

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

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

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

Удаляет тень кнопки

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

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

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

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

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

Vue Router router-link

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

Делает кнопку круглой

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

Установите фиксированный элемент

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

Удаляет цвет фона кнопки

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

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

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

Назначает кнопку в виде значка - круглый и плоский

Имя
input-value
По умолчанию
undefined
Тип
any

Управляет активным состоянием кнопки

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

Кнопка большого размера

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

Выровнять компонент слева

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

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

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

Добавляет анимацию иконок загрузки

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

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

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

Кнопка будет иметь контур

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

Vue Router router-link

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

Выровнять компонент справа

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

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

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

Кнопка будет круглой по бокам

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

Кнопка малого размера

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

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

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

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

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

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

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

Выровнять компонент в по верхнему краю

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

Установите атрибут типа кнопки

Имя
value
По умолчанию
undefined
Тип
any

Контроль видимости

Примеры

Плоские

Плоские кнопки не имеют теней и фона. Только при наведении подсвечивается контейнер для показанной кнопки.

Обычные

Обычные кнопки имеют тень, которая увеличивается при нажатии. Это стиль по умолчанию.

Нажатые

Нажатые кнопки по-прежнему сохраняют свой цвет фона, но не имеют тени.

Варианты раскрывающегося списка кнопок

Выпадающие кнопки являются стандартным выбором с дополнительным стилем.

Иконка

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

Плавающая кнопка действия

Плавающие кнопки действия круглые и обычно содержат иконку.

Загрузчики

Используя загрузку, вы можете уведомить пользователя о том, что происходит обработка. По умолчанию используется компонент v-progress-circle, но это можно настроить.

Определение размеров

Кнопкам можно задавать различные размеры.

Контур

Контур кнопки имеет тот же цвет, что и текущий цвет кнопки.

Круглый

Закруглённые кнопки ведут себя так же, как обычные кнопки, но имеют закруглённые края.

Блок

Кнопки данного типа используют всю доступную ширину.

Edit this page | language on Github