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.

Disabled Switches

We can disable switches with the disabled prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch value input-value="true" disabled></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

This way, it’s not active.

Loading Switch

A switch can show a loading state.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch loading="warning" value input-value="true"></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The loading prop with the style name shows the loading state with the given style.

Switches Colors

We can change the switch color with the color prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch v-model="ex" label="red" color="red" value="red" hide-details></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    ex: false,
  }),
};
</script>

Flat Switches

The flat prop makes a switch flat:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch v-model="sw" flat :label="`Switch: ${sw.toString()}`"></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    sw: false,
  }),
};
</script>

Inset Switches

A switch can be displayed in inset mode with the inset prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-switch v-model="sw" inset :label="`Switch: ${sw.toString()}`"></v-switch>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    sw: false,
  }),
};
</script>

Sliders

A slider is used to let users select a number from a range.

We add one with the v-slider component:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider v-model="slider" class="align-center" :max="max" :min="min" hide-details>
          <template v-slot:append>
            <v-text-field
              v-model="slider"
              class="mt-0 pt-0"
              hide-details
              single-line
              type="number"
              style="width: 60px"
            ></v-text-field>
          </template>
        </v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    slider: 0,
    max: 100,
    min: 0,
  }),
};
</script>

We populate the append slot to show some to the right of the slider.

A v-text-field is shown to display the v-model value.

The max and min props are the max and min values of the slider respectively.

Also, we can prepend an item to the slider by populating the prepend slot:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider v-model="slider" class="align-center" :max="max" :min="min" hide-details>
          <template v-slot:prepend>
            <v-text-field
              v-model="slider"
              class="mt-0 pt-0"
              hide-details
              single-line
              type="number"
              style="width: 60px"
            ></v-text-field>
          </template>
        </v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    slider: 0,
    max: 100,
    min: 0,
  }),
};
</script>

Now we have the number shown on the left.

Conclusion

We can add switches and number sliders 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.

Inverse Slider Label

We can add the inverse-label prop to display labels at the end of it:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider inverse-label label="Inverse label" value="30"></v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Custom Range slider

The tick-labels prop lets us add tick labels to the slider.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-range-slider
          :tick-labels="seasons"
          :value="[0, 1]"
          min="0"
          max="3"
          ticks="always"
          tick-size="4"
        >
          <template v-slot:thumb-label="props">
            <v-icon dark>{{ season(props.value) }}</v-icon>
          </template>
        </v-range-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    seasons: ["Winter", "Spring", "Summer", "Fall"],
    value: undefined,
    icons: ["mdi-snowflake", "mdi-leaf", "mdi-fire", "mdi-water"],
  }),
  methods: {
    season(val) {
      return this.icons[val];
    },
  },
};
</script>

We have the tick-labels prop lets us set the labels for the range slider.

Also, we have the ticks and ticks-size prop to show the number of ticks we want.

ticks set to always means that the ticks will be displayed.

Custom Color

We can change the color of the track and thumb with the track-color and thumb-color respectively.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider v-model="ex1.val" :label="ex1.label" :track-color="ex1.color"></v-slider>

        <v-slider
          v-model="ex2.val"
          :label="ex2.label"
          :thumb-color="ex2.color"
          thumb-label="always"
        ></v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    ex1: { label: "track-color", val: 75, color: "green" },
    ex2: { label: "thumb-color", val: 50, color: "red" },
  }),
};
</script>

The track color is the color to the right of the dot.

Thumb color is the color of the dot.

Range

We can add a range slid with the v-range-slider component.

The range slider has 2 dots to set the min and max values.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-range-slider v-model="value"></v-range-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    value: [30, 60],
  }),
};
</script>

We have the value array to use as the value for v-model .

The first value is the min value and the 2nd is the max.

Validation

We can validate slider values with the rules prop.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-slider
          v-model="value"
          :rules="rules"
          label="How many?"
          step="10"
          thumb-label="always"
          ticks
        ></v-slider>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    value: 30,
    rules: [(v) => v <= 50 || "Can't have more than 50"],
  }),
};
</script>

to add validation rules for the slider.

The rules is an array of functions with the validation rules.

v is the value of the slider.

And if the value isn’t valid, then an error message is returned.

Conclusion

We can add validation rules to sliders 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.

Grids

We can layout our components in a grid.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row v-for="n in 2" :key="n" :class="n === 1 ? 'mb-6' : ''" no-gutters>
      <v-col v-for="k in n + 1" :key="k">
        <v-card class="pa-2" outlined tile>{{ k }} of {{ n + 1 }}</v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We add the v-row and v-col components to add rows and columns respectively.

We can place anything inside the columns.

Equal Width Columns

Columns can be made to have equal widths.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row no-gutters>
      <template v-for="n in 6">
        <v-col :key="n">
          <v-card class="pa-2" outlined tile>Column</v-card>
        </v-col>
        <v-responsive v-if="n === 3" :key="`width-${n}`" width="100%"></v-responsive>
      </template>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We add the v-col components to add the columns.

And we add the v-responsive component to split the columns into rows according to the v-if check.

We have n === 3 as the value of v-if , so we display v-responsive after every 3 columns to split separate every 3 columns into their own row.

One Column Width

We can define the width of only one column and have its siblings automatically resize around it:

<template>
  <v-container class="grey lighten-5">
    <v-row class="mb-6" no-gutters>
      <v-col v-for="n in 3" :key="n" :cols="n === 1 ? 6 : undefined">
        <v-card class="pa-2" outlined tile>{{ n }} of 3 {{ n === 1 ? '(wider)' : '' }}</v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We set the first column to take up 6 columns with the cols prop.

Variable Content Width

The content width of columns can be variable.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row class="mb-6" justify="center" no-gutters>
      <v-col lg="2">
        <v-card class="pa-2" outlined tile>1 of 3</v-card>
      </v-col>
      <v-col md="auto">
        <v-card class="pa-2" outlined tile>Variable width content</v-card>
      </v-col>
      <v-col lg="2">
        <v-card class="pa-2" outlined tile>3 of 3</v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We set the breakpoints with the lg and md props.

The widths to the given number of columns when those breakpoints are met.

Conclusion

We can add rows and columns to create our layouts with Vuetify.

The widths can be set our way.

Vuetify is a popular UI framework for Vue apps.

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

Unique Layouts

We can add layouts with various rows and columns.

The number of columns a column take can be set according to breakpoints:

<template>  
  <v-container class="grey lighten-5">  
    <v-row>  
      <v-col cols="12" md="8">  
        <v-card class="pa-2" outlined tile>.col-12 .col-md-8</v-card>  
      </v-col>  
      <v-col cols="6" md="4">  
        <v-card class="pa-2" outlined tile>.col-6 .col-md-4</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

We have a row with columns that have different sizes.

The first column takes 12 columns by default and takes 8 if it’s md and up.

The 2nd takes 6 columns by default and takes 4 if it’s md and up.

The columns will be rearranged so that they always fit on the screen.

Vertical Alignment

We can change the vertical alignment of flex items and their parents with the align and align-self props.

For example, we can write:

<template>  
  <div>  
    <v-container class="grey lighten-5 mb-6">  
      <v-row align="start" no-gutters>  
        <v-col v-for="n in 3" :key="n" cols="2">  
          <v-card class="pa-2" outlined tile>column</v-card>  
        </v-col>  
      </v-row>  
    </v-container>  
  </div>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

We have the v-col components with the align prop to put the columns on the left.

Other values for align include center to put items in the center and end to put the columns at the end.

Horizontal Alignment

The horizontal alignment of flex items with the justify property:

<template>  
  <div>  
    <v-container class="grey lighten-5 mb-6">  
      <v-row justify="start" no-gutters>  
        <v-col v-for="n in 3" :key="n" cols="2">  
          <v-card class="pa-2" outlined tile>column</v-card>  
        </v-col>  
      </v-row>  
    </v-container>  
  </div>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

No Gutters

The no-gutters prop remove the gutters between the columns:

<template>  
  <v-container class="grey lighten-5">  
    <v-row no-gutters>  
      <v-col cols="12" sm="5" md="6">  
        <v-card class="pa-2" outlined tile>col</v-card>  
      </v-col>  
      <v-col cols="6" md="6">  
        <v-card class="pa-2" outlined tile>col</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Column Wrapping

If there are more than 12 columns in a row, then the extra columns will wrap onto a new line.

Order Classes

We can change the order of the grid items with the order prop on the v-col :

<template>  
  <v-container class="grey lighten-5">  
    <v-row no-gutters>  
      <v-col>  
        <v-card class="pa-2" outlined tile>First, but unordered</v-card>  
      </v-col>  
      <v-col order="3">  
        <v-card class="pa-2" outlined tile>Second, but last</v-card>  
      </v-col>  
      <v-col order="1">  
        <v-card class="pa-2" outlined tile>Third, but first</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Conclusion

We can create layout with various flexbox classes and props.

Vuetify is a popular UI framework for Vue apps.

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

Disabled Slider

We can disable the slider with the disabled prop:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider disabled label="Disabled" value="30"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Readonly Slider

A slider can also be disabled with the readonly prop. The difference between disabled and readonly is that a read-only slider looks a regular one.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider readonly label="Disabled" value="30"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Icons

Icons can be added to a slider.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="sound" prepend-icon="mdi-plus"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    sound: 0,  
  }),  
};  
</script>

to add an icon to the left of the slider with the prepend-icon prop.

We can do the same with the append-icon prop to add the icon to the right.

Also, we can listen to clicks on icons with the @click:append and @click:prepend directives.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider  
          v-model="zoom"  
          prepend-icon="mdi-minus"  
          append-icon="mdi-plus"  
          @click:append="zoomIn"  
          @click:prepend="zoomOut"  
        ></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    zoom: 100,  
  }),  
  methods: {  
    zoomOut() {  
      this.zoom = this.zoom - 10 || 0;  
    },  
    zoomIn() {  
      this.zoom = this.zoom + 10 || 100;  
    },  
  },  
};  
</script>

We set the zoomIn and zoomOut methods as the values of the directives to change the value of this.zoom and the slider value.

Vertical Sliders

The vertical prop makes a slider display vertically.

For instance, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="value" vertical label="Regular"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    value: 100,  
  }),  
};  
</script>

Thumb

We can display a label for the slider dot.

For instance, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="value" thumb-label="always"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    value: 100,  
  }),  
};  
</script>

The thumb-label prop displays the slider.

We can add a custom label by populating the thumb-label slot:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="value" thumb-label="always">  
          <template v-slot:thumb-label="{ value }">{{ value }}</template>  
        </v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    value: 100,  
  }),  
};  
</script>

Conclusion

We can add sliders to let users set the value to what we want.