Menu
I want to create a position fixed/absolute fab button on bottom right of page in vuetify.
I have this
<v-btn fab dark large color="primary">
<v-icon dark>add</v-icon>
</v-btn>
but it puts the button as left aligned and not fixed.
657
Vuetify Tile Button You can create them with the tile prop: <template> <v-app> <v-row class="ma-4" justify="space-around"> <v-btn tile> Tile Button </v-btn> <v-btn tile color="yellow"> Tile Button </v-btn> <v-btn tile color="blue"> Tile Button</v-btn> </v-row> </v-app> </template> ...
Usage. 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.
A floating action button (FAB) is a circular button that triggers the primary action in your app's UI. This page shows you how to add the FAB to your layout, customize some of its appearance, and respond to button taps.
Add the big button So we add the following <div>s. So we add the CSS rules, set the position fixed, 50px from bottom and 50px from the right. Add the cursor:pointer so it will look like a button. Then we add the <div class=”button iconbutton”> to wrap the fontawesome plus icon.
<v-btn fab dark large color="primary" fixed right bottom>
<v-icon dark>add</v-icon>
</v-btn>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With