Categories
Vuetify

Vuetify — Chips

Spread the love

Vuetify is a popular UI framework for Vue apps.

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

Chips

We can use the v-chip component to add a chip.

It conveys a small piece of information.

The close prop lets the chip become interactive.

To add one, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-chip class="ma-2" color="primary">Primary</v-chip>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We add the v-chip component with the color prop to change the color.

Icon

We can add an icon inside the chip.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-chip class="ma-2" color="indigo" text-color="white">
          <v-avatar left>
            <v-icon>mdi-account-circle</v-icon>
          </v-avatar>James
        </v-chip>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We add a v-avatar component with a v-icon inside.

Then we’ll see the icon to the left of the text.

Outlined

The outlined prop will make the chip display with an outline.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-chip class="ma-2" color="success" outlined>
          <v-icon left>mdi-server-plus</v-icon>Status
        </v-chip>
      </v-col>
    </v-row>
  </v-container>
</template>

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

Now we’ll see a white background with a border on the chip.

Label

We can make the chip border-radius less round to make a label.

The label prop will adjust the border-radius to be less round:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-chip class="ma-2" color="pink" label text-color="white">
          <v-icon left>mdi-label</v-icon>Tags
        </v-chip>
      </v-col>
    </v-row>
  </v-container>
</template>

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

Sizes

We can have various sizes with the v-chip component.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-chip class="ma-2" x-small>x-small</v-chip>
        <v-chip class="ma-2" small>small</v-chip>
        <v-chip class="ma-2">Default</v-chip>
        <v-chip class="ma-2" large>large</v-chip>
        <v-chip class="ma-2" x-large>x-large</v-chip>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We have the x-small , small , large and x-large props to change the chip size.

Filter

The filter prop lets us show an additional icon if it’s active.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-chip class="ma-2" :input-value="active" filter filter-icon="mdi-minus">chip</v-chip>
        <v-switch v-model="active" label="Active"></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We have the v-chip component with the input-value prop.

When it’s true , then we show an extra icon with the filter prop.

filter-icon lets us set the icon to show with active is true .

Conclusion

We can add chips to show small amounts of information.

The icon can be shown and toggled.

Leave a Reply

Your email address will not be published. Required fields are marked *