Кнопки: плавающая кнопка действия
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
Позиционировать элемент абсолютно
Выровнять компонент по нижнему краю
Направление, в котором будет отображаться содержимое скоростного набора. Возможные значения: top, bottom, left, right.
Установите фиксированный элемент
Выровнять компонент слева
Устанавливает режим перехода (не относится к transition-group)
Components.FloatingActionButtons.
Устанавливает начало перехода
Выровнять компонент справа
Выровнять компонент в по верхнему краю
Устанавливает компонентный переход. Может быть одним из встроенных переходов или вашим собственным.
Контроль видимости
Примеры
Малый вариант
Для лучшей визуальной привлекательности мы используем небольшую кнопку, чтобы соответствовать нашим аватарам.
Отображать анимацию
При первом отображении плавающая кнопка действия должна анимироваться на экране. Здесь мы используем v-fab-transition с v-show. Вы также можете использовать любой пользовательский переход, предоставляемый Vuetify или вашим собственным.
Горизонтальный экран
При изменении действия по умолчанию вашей кнопки рекомендуется отображать переход для обозначения изменения. Мы делаем это, связывая key с частью данных, которая может правильно сообщать об изменении в системе перехода Vue. Хотя вы можете использовать для этого специальный переход, убедитесь, что вы установили mode prop для out-in.
FAB со скоростным набором
Компонент быстрого набора обладает очень надёжным интерфейсом для настройки вашего FAB-интерфейса именно так, как вы хотите.