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.
Divider
Chakra UI Vue comes with a divider component.
To add it, we write:
<template>
<c-box>
<p>Part 1</p>
<c-divider />
<p>Part 2</p>
</c-box>
</template>
<script>
import { CBox, CDivider } from "@chakra-ui/vue";
export default {
components: {
CBox,
CDivider,
},
};
</script>
to add a horizontal divider with the c-divider component.
We can also add a vertical divider with:
<template>
<c-flex>
<span>Part 1</span>
<c-divider orientation="vertical" />
<span>Part 2</span>
</c-flex>
</template>
<script>
import { CFlex, CDivider } from "@chakra-ui/vue";
export default {
components: {
CFlex,
CDivider,
},
};
</script>
We just set orientation to vertical to add it.
And we can change the border color with the border-color prop:
<template>
<c-box>
<p>Part 1</p>
<c-divider border-color="red.200" />
<p>Part 2</p>
</c-box>
</template>
<script>
import { CBox, CDivider } from "@chakra-ui/vue";
export default {
components: {
CBox,
CDivider,
},
};
</script>
Drawer
Chakra UI Vue comes with components to let us add a drawer into our Vue app.
To add it, we write:
<template>
<c-box>
<c-button ref="btnRef" @click="isOpen = true">Open Drawer</c-button>
<c-drawer
:isOpen="isOpen"
placement="right"
:on-close="close"
:initialFocusRef="() => $refs.inputInsideModal"
>
<c-drawer-overlay />
<c-drawer-content>
<c-drawer-close-button />
<c-drawer-header>Create your account</c-drawer-header>
<c-drawer-body>
<c-input ref="inputInsideModal" placeholder="Type here..." />
</c-drawer-body>
<c-drawer-footer>
<c-button variant="outline" mr="3" @click="isOpen = false"
>Cancel</c-button
>
<c-button variant-color="blue">Save</c-button>
</c-drawer-footer>
</c-drawer-content>
</c-drawer>
</c-box>
</template>
<script>
import {
CBox,
CInput,
CButton,
CDrawer,
CDrawerBody,
CDrawerFooter,
CDrawerHeader,
CDrawerOverlay,
CDrawerContent,
CDrawerCloseButton,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CInput,
CButton,
CDrawer,
CDrawerBody,
CDrawerFooter,
CDrawerHeader,
CDrawerOverlay,
CDrawerContent,
CDrawerCloseButton,
},
data() {
return {
isOpen: false,
};
},
methods: {
close() {
this.isOpen = false;
},
},
};
</script>
We import and register the CDrawer, CDrawerBody, CDrawerFooter, CDrawerHeader, CDrawerOverlay, CDrawerContent, and CDrawerCloseButton components to add a drawer.
CDrawer is the main drawer container.
CDrawerBody is the container for the drawer body.
CDrawerFooter is the container for the drawer footer.
CDrawerHeader is the container for the drawer header.
CDrawerOverlay is the drawer overlay.
CDrawerContent is the container for the drawer content.
CDrawerCloseButton is the drawer close button.
We set the isOpen prop to the isOpen reactive property to let us control when to open or close the drawer.
The c-button opens the drawer since isOpen is set to true when we click it.
initialFocusRef sets the element that we want to focus on initially when the drawer is opened.
placement sets the drawer placement. We can set it to top, right, bottom, or left .
Conclusion
We can add a divider and drawer easily with Chakra UI Vue.
