Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Menu Custom Transitions
Custom transitions can be added to menus.
Vuetify comes with 3 standard transitions, which are scale , slide-x and slide-y .
For example, we can write:
<template>
<v-row justify="space-around">
<v-menu bottom origin="center center" transition="scale-transition">
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">Scale Transition</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{ title: "Click Me" },
{ title: "Click Me 2" },
{ title: "Click Me 3" },
],
}),
};
</script>
We have the transition prop to set the transition effect.
The on object is passed in as the value of v-on .
This lets us listen to events for the menu.
And attrs are props that we passed into v-bind so that we can set the props to show the menu.
The other choices for the transition prop are slide-x-transition and slide-y-transition .
Disabled Menu
We can disable the menu with the disabled prop.
For example, we can write:
<template>
<v-row justify="space-around">
<v-menu bottom origin="center center" transition="scale-transition" disabled>
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">Menu</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{ title: "Click Me" },
{ title: "Click Me 2" },
{ title: "Click Me 3" },
],
}),
};
</script>
then the button won’t open the menu.
X Offset
We can move the menu horizontally to make the activator visible.
For example, we can write:
<template>
<v-row justify="space-around">
<v-col cols="12">
<v-menu bottom origin="center center" transition="scale-transition" offset-x>
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">Menu</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-col>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{ title: "Click Me" },
{ title: "Click Me 2" },
{ title: "Click Me 3" },
],
}),
};
</script>
We move the menu to the right of the button with the offset-x prop.
Y Offset
Similarly, we can move the menu vertically.
For example, we can write:
<template>
<v-row justify="space-around">
<v-col cols="12">
<v-menu bottom origin="center center" transition="scale-transition" offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">Menu</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-col>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{ title: "Click Me" },
{ title: "Click Me 2" },
{ title: "Click Me 3" },
],
}),
};
</script>
to move the menu above the menu button.
Conclusion
We can add menus with different transitions and positions.
