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.
