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.
Close Button
Chakra UI Vue comes with a close button component.
To add it, we write:
<template>
<c-box> <c-close-button /> </c-box>
</template>
<script>
import { CBox, CCloseButton } from "@chakra-ui/vue";
export default {
components: {
CBox,
CCloseButton,
},
};
</script>
to add the c-close-button component.
And we can change its size with the size prop:
<template>
<c-box> <c-close-button size="lg" /> </c-box>
</template>
<script>
import { CBox, CCloseButton } from "@chakra-ui/vue";
export default {
components: {
CBox,
CCloseButton,
},
};
</script>
Code Display
We can use the c-code component to add a code display into our Vue app.
For instance, we can write:
<template>
<c-box> <c-code>Hello world</c-code></c-box>
</template>
<script>
import { CBox, CCode } from "@chakra-ui/vue";
export default {
components: {
CBox,
CCode,
},
};
</script>
to add text that’s displayed as code.
We can change the background with the variant-color prop:
<template>
<c-box>
<c-stack is-inline>
<c-code>console.log(welcome)</c-code>
<c-code variant-color="red">var chakra = 'awesome!'></c-code>
<c-code variant-color="yellow">npm install chakra</c-code>
</c-stack>
</c-box>
</template>
<script>
import { CBox, CCode, CStack } from "@chakra-ui/vue";
export default {
components: {
CBox,
CCode,
CStack,
},
};
</script>
Collapse
Chakra UI Vue comes with a collapse component.
To add it, we write:
<template>
<c-box>
<c-button mb="4" variant-color="blue" @click="show = !show">
Toggle
</c-button>
<c-collapse :is-open="show">
Anim pariatur cliche reprehenderit
</c-collapse>
</c-box>
</template>
<script>
import { CBox, CButton, CCollapse } from "@chakra-ui/vue";
export default {
components: {
CBox,
CButton,
CCollapse,
},
data() {
return {
show: false,
};
},
};
</script>
We have the c-button component that lets us click to toggle the show reactive property.
And we use show to control whether the c-collapse component is displayed by passing show as the value of the is-open prop.
We can set the height of the collapse component with its’ collapsed with the starting-height prop:
<template>
<c-box>
<c-button mb="4" variant-color="blue" @click="show = !show">
Toggle
</c-button>
<c-collapse :is-open="show" :starting-height="20">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
magna in diam porttitor hendrerit quis ut quam. Aliquam et sem eget eros
sodales pretium sit amet sit amet dolor.
</c-collapse>
</c-box>
</template>
<script>
import { CBox, CButton, CCollapse } from "@chakra-ui/vue";
export default {
components: {
CBox,
CButton,
CCollapse,
},
data() {
return {
show: false,
};
},
};
</script>
20 is in pixels.
Conclusion
We can add a close button, code display and collapse component with Chakra UI Vue.
