The v-btn component can be used as a floating action button. This provides an application with a main point of action. Combined with the v-speed-dial component, you can create a diverse set of functions available for your users.
Плавающие кнопки действия могут быть прикреплены к материалу для указания рекламируемого действия в вашем приложении. Размер по умолчанию будет использоваться в большинстве случаев, тогда как «маленький» вариант может использоваться для поддержания преемственности с аналогичными элементами.
Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.
Applies position: absolute to the component.
Aligns the component towards the bottom.
Направление, в котором будет отображаться содержимое скоростного набора. Возможные значения: top, bottom, left, right.
Applies position: fixed to the component.
Aligns the component towards the left.
Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation for transition modes.
Открывает speed-dial при наведении
Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin.
Aligns the component towards the right.
Aligns the content towards the top.
Sets the component transition. Can be one of the built in transitions or one your own.
Controls whether the component is visible or hidden.
При использовании активируется компонент при нажатии (или наведение на определённые компоненты). Это вручную останавливает распространение события. Без этого слота, если вы откроете компонент через свою модель, вам нужно будет вручную остановить распространение события
Слот Vue по умолчанию.
6px !default;16px !default;1 !default;Ниже приведена коллекция простых и сложных примеров.
Для лучшей визуальной привлекательности мы используем небольшую кнопку, чтобы соответствовать нашим аватарам.
При первом отображении плавающая кнопка действия должна анимироваться на экране. Здесь мы используем v-fab-transition с v-show. Вы также можете использовать любой пользовательский переход, предоставляемый Vuetify или вашим собственным.
Компонент быстрого набора обладает очень надёжным интерфейсом для настройки вашего FAB-интерфейса именно так, как вы хотите.
При изменении действия по умолчанию вашей кнопки рекомендуется отображать переход для обозначения изменения. Мы делаем это, связывая key с частью данных, которая может правильно сообщать об изменении в системе перехода Vue. Хотя вы можете использовать для этого специальный переход, убедитесь, что вы установили mode prop для out-in.
Готовы к большему? Продолжить чтение с: