Vuetify — Overflow Button

Vuetify is a popular UI framework for Vue apps.

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

Overflow Button Hint

We can add the hint property to show a hint below the overflow button.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          hint="Select fruit"
          item-value="text"
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [{ text: "apple" }, { text: "orange" }, { text: "grape" }],
  }),
};
</script>

We have the hint prop with the text to show.

Loading Bar

The loading prop lets us show the loading bar at the bottom of the overflow button:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          hint="Select fruit"
          item-value="text"
          loading
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [{ text: "apple" }, { text: "orange" }, { text: "grape" }],
  }),
};
</script>

Menu Props

We can set the menu-props prop to change the menu position:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          hint="Select fruit"
          item-value="text"
          menu-props="top"
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [{ text: "apple" }, { text: "orange" }, { text: "grape" }],
  }),
};
</script>

We set it to top so that it opens on top.

Read-Only

We can make the v-overflow-btn read only with the readonly prop.

It’ll become inactive but no styles are changed.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          hint="Select fruit"
          item-value="text"
          readonly
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [{ text: "apple" }, { text: "orange" }, { text: "grape" }],
  }),
};
</script>

Now we can’t select items from the dropdown.

Segmented Button

We can make the v-overflow-btn segmented.

This means that it has an additional divider between the content and the icon.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          hint="Select fruit"
          item-value="text"
          segmented
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [
      { text: "apple", callback: () => console.log("apple") },
      { text: "orange", callback: () => console.log("orange") },
      { text: "grape", callback: () => console.log("grape") },
    ],
  }),
};
</script>

We have the callback property for each entry, which is required.

When we click on the entry, it’ll be called.

Conclusion

We can add an overflow button to add a dropdown to our Vuetify app.