Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.
This article will look at how to get started with UI development with Chakra UI Vue.
Select
Chakra UI Vue comes with a styled select dropdown component.
To add it, we write:
<template>
<c-box>
<c-select v-model="fruit" placeholder="Select Fruit">
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="grape">grape</option>
</c-select>
</c-box>
</template>
<script>
import { CBox, CSelect } from "@chakra-ui/vue";
export default {
components: {
CBox,
CSelect,
},
data() {
return {
fruit: "",
};
},
};
</script>
We add the c-select component with v-model to bind the selected value to the fruit reactive property.
The value attribute value of the chosen option will be set as the value of fruit .
placeholder sets the placeholder.
And we add the options with the option tag.
We can set the style variant of the dropdown.
To do this, we just have to set the variant prop:
<template>
<c-box>
<c-select variant="filled" v-model="fruit" placeholder="Select Fruit">
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="grape">grape</option>
</c-select>
</c-box>
</template>
<script>
import { CBox, CSelect } from "@chakra-ui/vue";
export default {
components: {
CBox,
CSelect,
},
data() {
return {
fruit: "",
};
},
};
</script>
filled will fill the background with a color.
We can also set it to outline, flushed, or unstyled .
outline adds an outline around the dropdown.
flushed removes the outline.
unstyled means no styles are added to the dropdown.
We can also set the styles of the dropdown ourselves.
To do this, we write:
<template>
<c-box>
<c-select
backgroundColor="tomato"
borderColor="tomato"
color="white"
v-model="fruit"
placeholder="Select Fruit"
>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="grape">grape</option>
</c-select>
</c-box>
</template>
<script>
import { CBox, CSelect } from "@chakra-ui/vue";
export default {
components: {
CBox,
CSelect,
},
data() {
return {
fruit: "",
};
},
};
</script>
backgroundColor sets the background color. borderColor sets the border color. And color sets the text color.
Conclusion
We can add a dropdown easily with Chakra UI Vue.
