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.

Time Picker Width

We can set the width of a time picker with the width prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" type="month" width="290" class="ml-4"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

The width is in pixels.

Also, we can add the full-width prop to make the time picker full width:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" :landscape="$vuetify.breakpoint.mdAndUp" full-width type="month"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

We can set it to landscape mode at the breakpoint we want so that the header will be displayed as the sidebar.

Time Picker’s Elevation

A time picker can have a shadow below it.

We can add the flat prop to remove the shadow:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" flat></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

Or we can add the elevation prop to add our shadow:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" elevation="15"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

The value is between 0 to 24.

AM/PM Switch in Title

We can add the ampm-in-title prop to add the AM and PM text into the header.

For example, we can write:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" ampm-in-title></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

This way, we can choose an AM or PM time.

No Title

We can remove the title bar with the no-title prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" no-title></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

Time Picker With Seconds

A time picker can let us choose the seconds.

To do that, we add the use-seconds prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="picker" use-seconds></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

Now we can pick the seconds.

Scrollable Time Picker

We can make the time values scrollable with the scrollable prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="picker" scrollable></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

Now we pick our time values by scrolling with the scroll wheel.

Range

The time value range can be restricted with the min and max props:

<template>  
  <v-row justify="space-around" align="center">  
    <v-col style="width: 290px; flex: 0 1 auto;">  
      <h2>Start:</h2>  
      <v-time-picker v-model="start" :max="end"></v-time-picker>  
    </v-col>  
    <v-col style="width: 290px; flex: 0 1 auto;">  
      <h2>End:</h2>  
      <v-time-picker v-model="end" :min="start"></v-time-picker>  
    </v-col>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    start: null,  
    end: null,  
  }),  
};  
</script>

We have the max prop to set the maximum time we can choose.

And the min prop sets a minimum time restriction.

Conclusion

We can customize time pickers in many ways.

Vuetify is a popular UI framework for Vue apps.

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

Ratings

The v-rating component lets us add a star rating input to our app.

To use it, we can write:

<template>
  <div>
    <v-rating v-model="rating" background-color="purple lighten-3" color="purple" small></v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4,
  }),
};
</script>

The v-model has the rating value.

background-color has the fill color.

color has the outline color.

small makes the stars extra small.

We can also set the size to large , x-large , and the size prop.

The size prop lets us set the stars to any size value in pixels.

Custom Length

We can change the number of stars to display.

To do that, we use the length prop:

<template>
  <div>
    <v-rating v-model="rating" background-color="purple lighten-3" color="purple" :length="10"></v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4,
  }),
};
</script>

We set length to 10, so we see 10 stars displayed.

Incremented

We can add full icons, half icons, or empty icons.

For example, we can write:

<template>
  <div>
    <v-rating v-model="rating" background-color="purple lighten-3" color="purple" half-increments></v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4.5,
  }),
};
</script>

The half-increments prop lets us add half stars.

So when we set rating to 4.5, we’ll see 4.5 stars.

Slots

We can populate the star slots to customize the stars as we wish.

For example, we can write:

<template>
  <div class="text-center">
    <v-rating v-model="rating">
      <template v-slot:item="props">
        <v-icon
          :color="props.isFilled ? genColor(props.index) : 'grey lighten-1'"
          large
          @click="props.click"
        >{{ props.isFilled ? 'mdi-star-circle' : 'mdi-circle-outline' }}</v-icon>
      </template>
    </v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    colors: ["green", "purple", "orange", "indigo", "red"],
    rating: 4.5,
  }),
  methods: {
    genColor(i) {
      return this.colors[i];
    },
  },
};
</script>

We have the isFilled property from the slot props to determine whether the star should be filled or not.

The click method can be passed into the @click directive as the click handler.

This way, when we click it, we’ll see the value displayed with the stars.

We have different colors from different stars by returning the color name from the genColor method.

Card Ratings

We can put a v-rating component on a card.

For example, we can write:

<template>
  <v-card class="mx-auto elevation-20" color="purple" dark style="max-width: 400px;">
    <v-row justify="space-between">
      <v-col cols="8">
        <v-card-title>
          <div>
            <div class="headline">Song</div>
          </div>
        </v-card-title>
      </v-col>
      <v-col cols="4">
        <v-img
          class="shrink ma-2"
          contain
          height="125px"
          src="https://randomuser.me/api/portraits/women/68.jpg"
          style="flex-basis: 125px"
        ></v-img>
      </v-col>
    </v-row>
    <v-divider dark></v-divider>
    <v-card-actions class="pa-4">
      Rate this album
      <v-spacer></v-spacer>
      <span class="grey--text text--lighten-2 caption mr-2">({{ rating }})</span>
      <v-rating
        v-model="rating"
        background-color="white"
        color="yellow accent-4"
        dense
        half-increments
        hover
        size="18"
      ></v-rating>
    </v-card-actions>
  </v-card>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4.5,
  }),
  methods: {
    genColor(i) {
      return this.colors[i];
    },
  },
};
</script>

We put the v-rating component in the v-card-actions to make it show at the bottom of the card.

Conclusion

We can add the v-rating component to let us add a star rating input to our app.

Vuetify is a popular UI framework for Vue apps.

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

Progress Circular

We can add a circular progress display with the v-progress-circular component.

For example, we can write:

<template>
  <div class="text-center">
    <v-progress-circular indeterminate color="primary"></v-progress-circular>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The indeterminate prop makes it display forever.

And the color prop sets the color.

Size and Width

The size and width props let us change the size and width of the circular progress display:

<template>
  <div class="text-center">
    <v-progress-circular indeterminate color="red" :width="3"></v-progress-circular>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The width changes the width.

The size changes the radius in pixels of the circular progress display:

<template>
  <div class="text-center">
    <v-progress-circular indeterminate color="red" :size="50"></v-progress-circular>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Rotate

The rotate prop lets us customize the v-progress-circular component’s origin.

For instance, we can write:

<template>
  <div class="text-center">
    <v-progress-circular
      :rotate="360"
      :size="100"
      :width="15"
      :value="value"
      color="teal"
    >{{ value }}</v-progress-circular>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      interval: {},
      value: 0,
    };
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  mounted() {
    this.interval = setInterval(() => {
      if (this.value === 100) {
        return (this.value = 0);
      }
      this.value += 10;
    }, 1000);
  },
};
</script>

to display the value inside the circle and also set the progress bar’s fill color according to value .

Progress Linear

In addition to a circular progress display, Vuetify also comes with the v-progress-linear component to display progress in a line.

For example, we can add one with:

<template>
  <div class="text-center">
    <v-progress-linear v-model="valueDeterminate" color="deep-purple accent-4"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      valueDeterminate: 50,
    };
  },
};
</script>

The v-model sets the progress value.

color has the color of the bar.

Indeterminate Bar

We can add the indeterminate prop to make it animate forever:

<template>
  <div class="text-center">
    <v-progress-linear indeterminate color="yellow darken-2"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
};
</script>

Buffer

We can add a buffer state to represent 2 values simultaneously.

For example, we can write:

<template>
  <div class="text-center">
    <v-progress-linear v-model="value" :buffer-value="bufferValue"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      value: 10,
      bufferValue: 20,
      interval: 0,
    };
  },

  watch: {
    value(val) {
      if (val < 100) return;

      this.value = 0;
      this.bufferValue = 10;
      this.startBuffer();
    },
  },

  mounted() {
    this.startBuffer();
  },

  beforeDestroy() {
    clearInterval(this.interval);
  },

  methods: {
    startBuffer() {
      clearInterval(this.interval);

      this.interval = setInterval(() => {
        this.value += Math.random() * (15 - 5) + 5;
        this.bufferValue += Math.random() * (15 - 5) + 6;
      }, 2000);
    },
  },
};
</script>

We have the bufferValue which is higher than the value value.

v-model has the progress value and buffer-value has the 2nd value, which is bigger than the v-model ‘s value.

Conclusion

We can add a circular or linear progress display with Vuetify’s components.

Vuetify is a popular UI framework for Vue apps.

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

Query Indeterminate and Determinate

We can use the query state to control the truthiness of the indeterminate prop.

For example, we can write:

<template>
  <div class="text-center">
    <v-progress-linear v-model="value" :active="show" :indeterminate="query" :query="true"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      value: 0,
      query: false,
      show: true,
      interval: 0,
    };
  },
`
  mounted() {
    this.queryAndIndeterminate();
  },
`
  beforeDestroy() {
    clearInterval(this.interval);
  },
`
  methods: {
    queryAndIndeterminate() {
      this.query = true;
      this.show = true;
      this.value = 0;
`
      setTimeout(() => {
        this.query = false;
`
        this.interval = setInterval(() => {
          if (this.value === 100) {
            clearInterval(this.interval);
            this.show = false;
            return setTimeout(this.queryAndIndeterminate, 2000);
          }
          this.value += 25;
        }, 1000);
      }, 2500);
    },
  },
};
</script>

We set the this.query state to false so the progress bar becomes one that doesn’t animate forever.

Instead, it animates the bar according to this.value which we set as the value of v-model .

Custom Colors

We can set the color and background-color props to set the foreground and background colors:

<template>
  <div class="text-center">
    <v-progress-linear background-color="pink lighten-3" color="pink lighten-1" value="15"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
};
</script>

Rounded Bar

We can add the rounded prop to make the progress bar rounded:

<template>
  <div class="text-center">
    <v-progress-linear rounded value="15"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
};
</script>

Streaming Bar

The stream prop makes the bar move like a stream.

For example, we can write:

<template>
  <div class="text-center">
    <v-progress-linear buffer-value="0" stream value="15"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
};
</script>

We add the stream prop to make the non-filled part, which is a dotted line, move.

Striped Bar

We can add the striped prop to make the filled part displayed with stripes:

<template>
  <div class="text-center">
    <v-progress-linear buffer-value="0" striped value="15"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
};
</script>

Reversed Bar

We can make the filled part display from right to left with the reverse prop:

<template>
  <div class="text-center">
    <v-progress-linear buffer-value="0" reverse value="15"></v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
};
</script>

Toolbar Loader

The absolute prop lets us display the v-progress-linear component on a toolbar.

For instance, we can write:

<template>
  <v-card class="mx-auto mt-6" width="344">
    <v-system-bar>
      <v-spacer></v-spacer>
      <v-icon>mdi-square</v-icon>
      <v-icon>mdi-circle</v-icon>
      <v-icon>mdi-triangle</v-icon>
    </v-system-bar>
    <v-toolbar>
      <v-btn icon>
        <v-icon>mdi-arrow-left</v-icon>
      </v-btn>
      <v-toolbar-title>App</v-toolbar-title>
      <v-progress-linear
        :active="loading"
        :indeterminate="loading"
        absolute
        bottom
        color="deep-purple accent-4"
      ></v-progress-linear>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
`
    <v-container style="height: 282px;">
      <v-row class="fill-height" align="center" justify="center">
        <v-scale-transition>
          <div v-if="!loading" class="text-center">
            <v-btn color="primary" @click="loading = true">Start loading</v-btn>
          </div>
        </v-scale-transition>
      </v-row>
    </v-container>
  </v-card>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    loading: false,
  }),
`
  watch: {
    loading(val) {
      if (!val) return;
`
      setTimeout(() => (this.loading = false), 5000);
    },
  },
};
</script>

We have the v-progress-linear component with the absolute and bottom props to make it display at the bottom of the toolbar.

The v-progress-linear component is in the v-toolbar so that we have it displayed this way.

And we have the loading state to determine when it’s loading or not.

Slot

We can add our own content to the default slot:

<template>
  <div>
    <v-progress-linear v-model="progress" color="blue-grey" height="25">
      <template v-slot="{ value }">
        <strong>{{ Math.ceil(value) }}%</strong>
      </template>
    </v-progress-linear>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    progress: 20,
  }),
};
</script>

The value is the value of the v-model .

Conclusion

We can customize a linear progress bar in various ways.

Vuetify is a popular UI framework for Vue apps.

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

Time Pickers

We can add a time picker with the v-time-picker component.

For example, we can use it by writing:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" color="green lighten-1"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: undefined,  
  }),  
};  
</script>

We add the v-time-picker component to add the time picker.

The color prop sets the color of the heading.

v-model has the time value that’s picked.

Disabled

We can disable a date picker with the disabled prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" color="green lighten-1" disabled></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: undefined,  
  }),  
};  
</script>

Now we can’t pick a date.

Read-only

We can make the time picker be read-only with the readonly prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" color="green lighten-1" readonly></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: undefined,  
  }),  
};  
</script>

We won’t see any style differences from the regular time picker, but we can’t choose a time with it.

24h Format

The format prop lets us change the format of the time.

To change it to 24h format, we write:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" color="green lighten-1" format="24hr"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: undefined,  
  }),  
};  
</script>

Allowed Times

The time that can be picked can be restricted with the allowed-hours and allowed-minutes props:

<template>  
  <v-row justify="space-around">  
    <v-time-picker  
      v-model="time"  
      :allowed-hours="allowedHours"  
      :allowed-minutes="allowedMinutes"  
      class="mt-4"  
      format="24hr"  
      scrollable  
      min="9:30"  
      max="22:15"  
    ></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
  methods: {  
    allowedHours: (v) => v % 2,  
    allowedMinutes: (v) => v >= 10 && v <= 50,  
  },  
};  
</script>

We have the allowed-hours prop set to the allowedHours function.

It lets us return the condition for the hours that users can pick.

We can have similar functions for minutes and the step.

The v parameter has the hours and minutes.

For example, we can write:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="timeStep" :allowed-minutes="allowedStep" class="mt-4" format="24hr"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
    timeStep: "10:10",  
  }),  
  methods: {  
    allowedStep: (m) => m % 10 === 0,  
  },  
};  
</script>

We have the allowedStep function, which we use as the value of the allowed-minutes prop.

m has the minutes.

Conclusion

We can add a time picker with various restrictions set on it.

Its color can also be changed.