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.
Grid Layout
We can add a grid layout with the c-grid component.
For instance, we can write:
<template>
<c-box>
<c-grid w="600px" template-columns="repeat(5, 1fr)" gap="6">
<c-box w="100%" h="10" bg="blue.300" />
<c-box w="100%" h="10" bg="vue.300" />
<c-box w="100%" h="10" bg="orange.300" />
<c-box w="100%" h="10" bg="pink.300" />
<c-box w="100%" h="10" bg="red.300" />
</c-grid>
</c-box>
</template>
<script>
import { CBox, CGrid } from "@chakra-ui/vue";
export default {
components: {
CBox,
CGrid,
},
};
</script>
to add a grid container with it.
template-columns lets us define the columns for the grid.
gap lets us set the gap between each grid item.
Then we have c-box inside it to add the grid items.
w is the width. h is the height. bg is the background color.
Heading
We can add a heading with the c-heading component.
For example, we can write:
<template>
<c-box>
<c-heading>I'm a Heading</c-heading>
</c-box>
</template>
<script>
import { CBox, CHeading } from "@chakra-ui/vue";
export default {
components: {
CBox,
CHeading,
},
};
</script>
We can set the tag that it’s rendered as with the as prop.
The size prop sets the size of the heading.
For example, we can write:
<template>
<c-box>
<c-heading as="h1" size="2xl">I'm a Heading</c-heading>
</c-box>
</template>
<script>
import { CBox, CHeading } from "@chakra-ui/vue";
export default {
components: {
CBox,
CHeading,
},
};
</script>
to set the tag and size.
2xl is the biggest size.
Other sizes include xl , lg , md , sm , and xs .
xl is extra large. lg is large. md is medium. sm is small and xs is extra small.
We can also change the font size with the fontSize prop:
<template>
<c-box>
<c-heading as="h1" fontSize="50px">I'm a Heading</c-heading>
</c-box>
</template>
<script>
import { CBox, CHeading } from "@chakra-ui/vue";
export default {
components: {
CBox,
CHeading,
},
};
</script>
Conclusion
We can add a grid layout and heading with Chakra UI Vue.
