Category: Vue

Vuetify is a popular UI framework for Vue apps.

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

Dividers

We can use dividers to divide content.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-card>
          <v-list two-line>
            <template v-for="(item, index) in items.slice(0, 6)">
              <v-divider v-if="item.divider" :key="index" :inset="item.inset"></v-divider>
              <v-list-item v-else :key="index">
                <v-list-item-avatar>
                  <img :src="item.avatar" />
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-list-item-title v-html="item.title"></v-list-item-title>
                  <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </template>
          </v-list>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
        title: "title",
        subtitle: "subtitle",
      },
      { divider: true, inset: true },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
        title: "title",
        subtitle: "subtitle",
      },
      { divider: true, inset: true },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
        title: "title",
        subtitle: "subtitle",
      },
    ],
  }),
};
</script>

We add the v-divider component to divide the rows with the divider.

It’s flush with the v-list-item .

Vertical Dividers

We can add vertical dividers with the vertical prop.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-toolbar color="purple" dark>
          <v-toolbar-title>Title</v-toolbar-title>
          <v-divider class="mx-4" vertical></v-divider>
          <span class="subheading">My Home</span>
          <v-spacer></v-spacer>
          <v-toolbar-items class="hidden-sm-and-down">
            <v-btn text>News</v-btn>
            <v-divider vertical></v-divider>
            <v-btn text>Blog</v-btn>
            <v-divider vertical></v-divider>
            <v-btn text>Music</v-btn>
            <v-divider vertical></v-divider>
          </v-toolbar-items>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
        </v-toolbar>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the v-divider with the vertical prop to add the vertical divider.

It’s also flush with the toolbar.

Vertical Inset Dividers

We can use the inset prop to add margins with the divider:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-toolbar color="purple" dark>
          <v-toolbar-title>Title</v-toolbar-title>
          <v-divider class="mx-4" vertical inset></v-divider>
          <span class="subheading">My Home</span>
          <v-spacer></v-spacer>
          <v-toolbar-items class="hidden-sm-and-down">
            <v-btn text>News</v-btn>
            <v-divider vertical inset></v-divider>
            <v-btn text>Blog</v-btn>
            <v-divider vertical inset></v-divider>
            <v-btn text>Music</v-btn>
            <v-divider vertical inset></v-divider>
          </v-toolbar-items>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
        </v-toolbar>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Conclusion

We can add dividers for menu items and rows.

Vuetify is a popular UI framework for Vue apps.

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

Prepend and Append Item Slots

We can populate slots with various items.

For example, we can add an item above the choices we have by populating the prepend-item slot:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select v-model="selectedFruits" :items="fruits" label="Favorite Fruits" multiple>
          <template v-slot:prepend-item>
            <v-list-item ripple @click="toggle">
              <v-list-item-action>
                <v-icon :color="selectedFruits.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title>Select All</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-divider class="mt-2"></v-divider>
          </template>
          <template v-slot:append-item>
            <v-divider class="mb-2"></v-divider>
            <v-list-item disabled>
              <v-list-item-avatar color="grey lighten-3">
                <v-icon>mdi-food-apple</v-icon>
              </v-list-item-avatar>

              <v-list-item-content v-if="likesAllFruit">
                <v-list-item-title>all selected</v-list-item-title>
              </v-list-item-content>

              <v-list-item-content v-else-if="likesSomeFruit">
                <v-list-item-title>{{ selectedFruits.length }} selected</v-list-item-title>
              </v-list-item-content>

              <v-list-item-content v-else>
                <v-list-item-title>no fruit selected</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </template>
        </v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    fruits: ["apple", "orange", "pear"],
    selectedFruits: [],
  }),
  computed: {
    likesAllFruit() {
      return this.selectedFruits.length === this.fruits.length;
    },
    likesSomeFruit() {
      return this.selectedFruits.length > 0 && !this.likesAllFruit;
    },
    icon() {
      if (this.likesAllFruit) return "mdi-close-box";
      if (this.likesSomeFruit) return "mdi-minus-box";
      return "mdi-checkbox-blank-outline";
    },
  },
  methods: {
    toggle() {
      if (this.likesAllFruit) {
        this.selectedFruits = [];
      } else {
        this.selectedFruits = [...this.fruits];
      }
    },
  },
};
</script>

We have the v-select component with the prepend-item slot having the Select All checkbox.

We have the v-list-item that calls toggle when it’s clicked to toggle the selection of fruits.

The toggle is displayed on top since it’s in the prepend-item slot.

Also, we have the append-item slot to populate the slot with some text.

The text is displayed at the bottom of the dropdown.

Change Selection Appearance

We can change the selection appearance.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select v-model="value" :items="items" label="Select Item" multiple>
          <template v-slot:selection="{ item, index }">
            <v-chip v-if="index === 0">
              <span>{{ item }}</span>
            </v-chip>
            <span v-if="index === 1" class="grey--text caption">(+{{ value.length - 1 }} others)</span>
          </template>
        </v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    value: [],
  }),
};
</script>

We populated the selection slot to add the number of items to the slot.

This will be displayed to the right of the selections.

Conclusion

The dropdown can be displayed with various content by populating slots.

Vuetify is a popular UI framework for Vue apps.

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

Multiple Selection Dropdown

We can add a multiple selection dropdown with the multiple prop.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select v-model="fruit" :items="items" menu-props="auto" label="Select" multiple></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    fruit: "",
  }),
};
</script>

Now the dropdown will have a checkbox to let us select the items.

The selected items can be displayed as chips with the chips prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select v-model="fruit" :items="items" menu-props="auto" label="Select" multiple chips></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    fruit: "",
  }),
};
</script>

Dense Dropdown

The dense prop lets us shrink the height of the dropdown.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select v-model="fruit" :items="items" menu-props="auto" label="Select" dense></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    fruit: "",
  }),
};
</script>

to add the dropdown with a shorter height.

Customized Item Text and Value

The item can be customized with different text and value.

To customize it, we can use the return-object prop.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select
          v-model="select"
          :items="items"
          menu-props="auto"
          label="State"
          return-object
          :hint="`${select.state}, ${select.abbr}`"
          item-text="state"
          item-value="abbr"
        ></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      { state: "Florida", abbr: "FL" },
      { state: "Georgia", abbr: "GA" },
      { state: "Nebraska", abbr: "NE" },
      { state: "South Dakota", abbr: "SD" },
      { state: "New York", abbr: "NY" },
    ],
    select: "",
  }),
};
</script>

We have the return-object prop with the item-text and item-value props.

item-text is the key of the selected item.

item-value is the key of the selected item’s value we want to set as the value of the v-model .

We can get both values as we did in value of the hint prop.

Custom Menu Props

We can set the menu-props prop with custom options.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" :menu-props="{ top: true, offsetY: true }" label="Label"></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    select: "",
  }),
};
</script>

We set the top property to true to make the dropdown drop up instead of down.

offsetY makes it shift its position higher.

Conclusion

We can add dropdowns with various options with Vuetify.

Vuetify is a popular UI framework for Vue apps.

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

Selects

We can create a select dropdown with the v-select component.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" label="Fruit"></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
  }),
};
</script>

We have the v-select component with the items prop.

items takes an array of items to display as the choices.

label has the dropdown label.

The disabled and readonly attributes can be used with v-select .

disabled lets us disable the dropdown with disabled styles displayed.

readonly also makes it disabled but no style changes are applied.

We can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" label="Fruit" disabled></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
  }),
};
</script>

to disable the v-select component.

And we can do add make it read-only with:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" label="Fruit" readonly></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
  }),
};
</script>

Options

We can add various options to the v-select component.

chips makes the selected items look like chips.

multiple enables multiple selections.

attach specifies which DOM element the component should attach to.

The value is a selector for the element we want to attach to.

solo renders the dropdown without the label.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select :items="items" label="Fruit" multiple></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
  }),
};
</script>

to enable multiple selections.

Icons

We can add prepended and appended icons to our dropdown.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select
          v-model="fruit"
          :items="items"
          menu-props="auto"
          label="Select"
          hide-details
          prepend-icon="mdi-domain"
          single-line
        ></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    fruit: "",
  }),
};
</script>

We have the prepend-icon prop to add the icon to the left of the dropdown.

We can add an icon to the right of the dropdown with the append-outer-icon prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-select
          v-model="fruit"
          :items="items"
          menu-props="auto"
          label="Select"
          hide-details
          append-outer-icon="mdi-domain"
          single-line
        ></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: ["apple", "orange", "pear"],
    fruit: "",
  }),
};
</script>

In both examples, we just set the prop value to the string with the icon name.

Conclusion

We can add dropdowns with various kinds of options with Vuetify.

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.