Vuetify — Inputs and Overflow Buttons

Vuetify is a popular UI framework for Vue apps.

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

Input Events

Inputs can listen to various click events for the icons.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-input
          :messages="['Messages']"
          append-icon="mdi-plus"
          prepend-icon="mdi-minus"
          @click:append="appendIconCallback"
          @click:prepend="prependIconCallback"
        >Default Slot</v-input>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    text: "",
  }),
  methods: {
    appendIconCallback() {
      alert("append");
    },
    prependIconCallback() {
      alert("prepend");
    },
  },
};
</script>

We populate the default slot with some text.

And we also have the click:append and click:prepend listeners to listen to clicks for the left and right icons respectively.

Overflow Buttons

We can create overflow buttons with the v-overflow-btn component.

It lets us create a dropdown to show items and select them.

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"
          counter
          item-value="text"
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [
      { text: "100%" },
      { text: "75%" },
      { text: "50%" },
      { text: "25%" },
      { text: "0%" },
    ],
  }),
};
</script>

We have the v-overflow-btn to create a dropdown.

The items prop have the items.

counter shows us the index of the selected item.

label has the label.

The item-value prop has the property name of the dropdownItems entry to display.

Disabled

We can disable the overflow button with the disabled prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-overflow-btn
          class="my-2"
          :items="dropdownItems"
          label="Overflow Btn"
          counter
          disabled
          item-value="text"
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [
      { text: "100%" },
      { text: "75%" },
      { text: "50%" },
      { text: "25%" },
      { text: "0%" },
    ],
  }),
};
</script>

Dense Overflow Button

The dense prop makes the overflow button smaller.

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"
          counter
          dense
          item-value="text"
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [
      { text: "100%" },
      { text: "75%" },
      { text: "50%" },
      { text: "25%" },
      { text: "0%" },
    ],
  }),
};
</script>

Now the dropdown should be shorter.

Editable

We can make the dropdown editable with the editable prop.

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"
          counter
          editable
          item-value="text"
        ></v-overflow-btn>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownItems: [
      { text: "100%" },
      { text: "75%" },
      { text: "50%" },
      { text: "25%" },
      { text: "0%" },
    ],
  }),
};
</script>

The editable prop makes the input for the overflow button editable.

Conclusion

We can add inputs and overflow buttons with Vuetify.