Vuetify

Магазин

Для бизнеса

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.

Плавающие кнопки действия могут быть прикреплены к материалу для указания рекламируемого действия в вашем приложении. Размер по умолчанию будет использоваться в большинстве случаев, тогда как «маленький» вариант может использоваться для поддержания преемственности с аналогичными элементами.

Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.

Ниже приведена коллекция простых и сложных примеров.

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

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

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

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

Готовы к большему? Продолжить чтение с:

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!