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.
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.
Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.
Wendet den Style position: absolute auf einer Komponente an.
Legt die Komponente nach unten aus.
Direction in which speed-dial content will show. Possible values are top, bottom, left, right.
Wendet den Style position: fixed auf einer Komponente an.
Legt die Komponente nach links aus.
Legt den Übergangsmodus fest (gilt nicht für Übergangs-Gruppen). Weitere Informationen finden Sie in der Vue Dokumentation für Übergangsmodi.
Opens speed-dial on hover
Legt den Übergangspunkt des Elements fest. Mehr Informationen bezüglich des Herkunfts-Übergangs finden Sie in der MDN-Dokumentation.
Legt die Komponente nach rechts aus.
Legt die Komponente nach oben aus.
Legt den Komponenten-Übergang fest. Kann einer der eingebauten Übergänge oder ein eigener sein.
Legt fest, ob die Komponente sichtbar oder versteckt ist.
Bei Verwendung wird die Komponente aktiviert, wenn Sie darauf klicken (oder für bestimmte Komponenten den Mauszeiger darüber bewegen). Dadurch wird die event propagation manuell gestoppt. Wenn Sie die Komponente ohne diesen slot über ihr Modell öffnen, müssen Sie die event propagation manuell stoppen
Der Standard-Vue Slot.
6px !default;16px !default;1 !default;Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
For better visual appeal, we use a small button to match our list avatars.
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.
The speed-dial component has an very robust api for customizing your FAB experience exactly how you want.
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.