Botones: Floating Action Button
El componente v-btn puede ser usado como un FAB. Esto provee a la aplicación de un punto de acción principal. Combinado con el componente v-speed-dial puedes crear una variedad de funciones disponibles para tus usuarios.
Uso
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
Posiciona el elemento como absolute
Alínea el componente hacia abajo
La dirección en la cual el contenido del speed-dial se mostrará. Los valores posibles son top, bottom, left, right.
Posiciona el elemento como fixed
Alínea el componente hacia la izquierda
Configura el modo de transición (no aplica a los transition-group)
Abre el speed-dial al pasar el puntero por encima
Configura el origen de la transición
Alínea el componente hacia la derecha
Alínea el componente hacia arriba
Configura la transición del componente. Puede ser una de las transiciones prefabricadas o una propia.
Controla la visibilidad
Ejemplos
Small variant
For better visual appeal, we use a small button to match our list avatars.
Display animation
When displaying for the first time, a floating action button should animate onto the screen. Here we use the v-fab-transition with v-show. You can also use any custom transition provided by Vuetify or your own.
Lateral screens
When changing the default action of your button, it is recommended that you display a transition to signify a change. We do this by binding the key prop to a piece of data that can properly signal a change in action to the Vue transition system. While you can use a custom transition for this, ensure that you set the mode prop to out-in.
FAB with speed-dial
The speed-dial component has an very robust api for customizing your FAB experience exactly how you want.