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.
Conclusion
Floating action buttons can be displayed statically and dynamically.
We can also use them to trigger a speed dial.
