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

v-btnкомпонент может использоваться как плавающая кнопка действия. Это обеспечивает приложение главной точкой действия. В сочетании с компонентом v-speed-dial вы можете создать разнообразный набор функций, доступных для ваших пользователей.

Применение

Floating action buttons can be attached to material to signify a promoted action in your application. The default size will be used in most cases, whereas the small variant can be used to maintain continuity with similar sized elements.

API

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

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

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

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

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

Направление, в котором будет отображаться содержимое скоростного набора. Возможные значения: top, bottom, left, right.

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

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

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

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

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

Устанавливает режим перехода (не относится к transition-group)

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

Components.FloatingActionButtons.

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

Устанавливает начало перехода

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

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

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

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

Имя
transition
По умолчанию
'scale-transition'
Тип
string

Устанавливает компонентный переход. Может быть одним из встроенных переходов или вашим собственным.

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

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

Примеры

Малый вариант

Для лучшей визуальной привлекательности мы используем небольшую кнопку, чтобы соответствовать нашим аватарам.

Отображать анимацию

При первом отображении плавающая кнопка действия должна анимироваться на экране. Здесь мы используем v-fab-transition с v-show. Вы также можете использовать любой пользовательский переход, предоставляемый Vuetify или вашим собственным.

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

При изменении действия по умолчанию вашей кнопки рекомендуется отображать переход для обозначения изменения. Мы делаем это, связывая key с частью данных, которая может правильно сообщать об изменении в системе перехода Vue. Хотя вы можете использовать для этого специальный переход, убедитесь, что вы установили mode prop для out-in.

FAB со скоростным набором

Компонент быстрого набора обладает очень надёжным интерфейсом для настройки вашего FAB-интерфейса именно так, как вы хотите.

Edit this page | language on Github