Vuetify — Item Groups

Vuetify is a popular UI framework for Vue apps.

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

Item Groups

We can add group items with the v-item-group component.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-item-group multiple>
          <v-container>
            <v-row>
              <v-col v-for="n in 3" :key="n" cols="12" md="4">
                <v-item v-slot:default="{ active, toggle }">
                  <v-card
                    :color="active ? 'primary' : ''"
                    class="d-flex align-center"
                    dark
                    height="200"
                    @click="toggle"
                  >
                    <v-scroll-y-transition>
                      <div v-if="active" class="display-3 flex-grow-1 text-center">Active</div>
                    </v-scroll-y-transition>
                  </v-card>
                </v-item>
              </v-col>
            </v-row>
          </v-container>
        </v-item-group>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We populate the default slot of v-item with our own content.

active is a boolean which indicates whether the item is pressed or not.

toggle is a function that we can click to make the item active.

Active Class

We can set the active class with active-class prop on the v-item-group .

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-item-group active-class="primary">
          <v-container>
            <v-row>
              <v-col v-for="n in 3" :key="n" cols="12" md="4">
                <v-item v-slot:default="{ active, toggle }">
                  <v-card class="d-flex align-center" dark height="200" @click="toggle">
                    <v-scroll-y-transition>
                      <div v-if="active" class="display-3 flex-grow-1 text-center">Active</div>
                    </v-scroll-y-transition>
                  </v-card>
                </v-item>
              </v-col>
            </v-row>
          </v-container>
        </v-item-group>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We set the active-class to primary to set the class when active is true .

Chips

We can add a custom chip group with the v-item component.

For instance, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-item-group multiple>
          <v-subheader>Tags</v-subheader>
          <v-item v-for="n in 8" :key="n" v-slot:default="{ active, toggle }">
            <v-chip active-class="purple--text" :input-value="active" @click="toggle">Tag {{ n }}</v-chip>
          </v-item>
        </v-item-group>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to add a bunch of chips within a v-item-group .

List Item Groups

We can group list items into a group.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-list flat>
          <v-list-item-group v-model="model" color="indigo">
            <v-list-item v-for="(item, i) in items" :key="i">
              <v-list-item-icon>
                <v-icon v-text="item.icon"></v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title v-text="item.text"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        icon: "mdi-wifi",
        text: "Wifi",
      },
      {
        icon: "mdi-bluetooth",
        text: "Bluetooth",
      },
      {
        icon: "mdi-chart-donut",
        text: "Data Usage",
      },
    ],
  }),
};
</script>

We use the v-list component to add a list.

Then we add a v-list-item-group to add the items.

v-list-item-icon adds the icon.

And v-list-item-content adds the content for the list item.

Conclusion

We can add list items and item groups with Vuetify.