Vuetify — Floating Action Buttons
By: John Au-Yeung
Tags: JavaScript, Web Development, Software Development, Technology, Programming

Photo by Vidar Nordli-Mathisen on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Floating Action Button with Speed-Dial

We can add a floating action button with a speed dial with the v-speed-dial component.

For instance, we can write:

<template>

<v-container>

<v-row class="text-center">

<v-col col="12">

<v-card id="create">

<v-container fluid style='height: 300px'></v-container>

<v-speed-dial

v-model="fab"

bottom

direction="top"

:open-on-hover="false"

transition="slide-y-reverse-transition"

>

<template v-slot:activator>

<v-btn v-model="fab" color="blue darken-2" dark fab>

<v-icon v-if="fab">mdi-close</v-icon>

<v-icon v-else>mdi-account-circle</v-icon>

</v-btn>

</template>

<v-btn fab dark small color="green">

<v-icon>mdi-pencil</v-icon>

</v-btn>

<v-btn fab dark small color="indigo">

<v-icon>mdi-plus</v-icon>

</v-btn>

<v-btn fab dark small color="red">

<v-icon>mdi-delete</v-icon>

</v-btn>

</v-speed-dial>

</v-card>

</v-col>

</v-row>

</v-container>

</template> <script>

export default {

name: "HelloWorld",

data: () => ({

fab: false,

}),

};

</script>

We have the v-container component to space the button.

The activator flow has a floating action button.

The v-model controls the speed dial display.

The value of fab is changed when we click on the button.

The v-speed-dial display is also controlled by the fab state.

It’ll be shown when fab is true .

The bottom prop makes it display at the bottom.

direction changes the direction that the speed dial is displayed on.

open-on-hover lets us control whether we open the speed dial on hover.

transition make us change the transition effect.

Lateral Screens

When we change tabs, we can display a different floating action button.

For example, we can write:

<template>

<v-container>

<v-row class="text-center">

<v-col col="12">

<v-card id="lateral">

<v-toolbar dark tabs flat color="indigo">

<v-app-bar-nav-icon></v-app-bar-nav-icon>

<v-toolbar-title>Page title</v-toolbar-title>

<v-spacer></v-spacer>

<v-btn icon>

<v-icon>mdi-magnify</v-icon>

</v-btn>

<v-btn icon>

<v-icon>mdi-dots-vertical</v-icon>

</v-btn>

<template v-slot:extension>

<v-tabs v-model="tabs" align-with-title>

<v-tab href="#one">Item One</v-tab>

<v-tab href="#two">Item Two</v-tab>

<v-tab href="#three">Item Three</v-tab>

<v-tabs-slider color="pink"></v-tabs-slider>

</v-tabs>

</template>

</v-toolbar>

<v-card-text>

<v-tabs-items v-model="tabs">

<v-tab-item

v-for="content in ['one', 'two', 'three']"

:key="content"

:value="content"

>

<v-card height="200px" flat></v-card>

</v-tab-item>

</v-tabs-items>

</v-card-text>

<v-fab-transition>

<v-btn

:key="activeFab.icon"

:color="activeFab.color"

fab

large

dark

bottom

left

class="v-btn--example"

>

<v-icon>{{ activeFab.icon }}</v-icon>

</v-btn>

</v-fab-transition>

</v-card>

</v-col>

</v-row>

</v-container>

</template> <script>

export default {

name: "HelloWorld",

data: () => ({

fab: false,

hidden: false,

tabs: null,

}), computed: {

activeFab() {

switch (this.tabs) {

case "one":

return { color: "success", icon: "mdi-pencil" };

case "two":

return { color: "red", icon: "mdi-plus" };

case "three":

return { color: "green", icon: "mdi-delete" };

default:

return {};

}

},

},

};

</script>

We have the color prop to change the color.

The v-icon has our icon.

We use a computed property to compute the value of the floating action button icon and color to display.

The large prop makes the button big.

dark makes the button darker.

bottom and left makes the button display on the bottom left.

Photo by ShareGrid on Unsplash

Conclusion

Floating action buttons can be displayed statically and dynamically.

We can also use them to trigger a speed dial.