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.
Tags
We can add tags into our Vue app with Chakra UI Vue.
For instance, we can write:
<template>
<c-box>
<c-tag>Awesome Tag</c-tag>
</c-box>
</template>
<script>
import { CBox, CTag } from "@chakra-ui/vue";
export default {
components: {
CBox,
CTag,
},
};
</script>
to add a simple tag with the c-tag component.
We can set the size of the tag with the size prop and set the background color with the variantColor prop:
<template>
<c-box>
<c-tag size="sm" variantColor="vue">Awesome Tag</c-tag>
</c-box>
</template>
<script>
import { CBox, CTag } from "@chakra-ui/vue";
export default {
components: {
CBox,
CTag,
},
};
</script>
size can be sm , md or lg ordered from smallest to largest.
We can add a left icon with c-tag-icon :
<template>
<c-box>
<c-tag>
<c-tag-icon icon="add" size="12px" />
<c-tag-label>Awesome Tag</c-tag-label>
</c-tag>
</c-box>
</template>
<script>
import { CBox, CTag, CTagIcon, CTagLabel } from "@chakra-ui/vue";
export default {
components: {
CBox,
CTag,
CTagIcon,
CTagLabel,
},
};
</script>
We put our tag text in c-tag-label .
icon has the icon name and size has the icon size.
We can add a close button to the tag with the c-tag-close-button component:
<template>
<c-box>
<c-tag>
<c-tag-label>Awesome Tag</c-tag-label>
<c-tag-close-button />
</c-tag>
</c-box>
</template>
<script>
import { CBox, CTag, CTagCloseButton, CTagLabel } from "@chakra-ui/vue";
export default {
components: {
CBox,
CTag,
CTagCloseButton,
CTagLabel,
},
};
</script>
We can add an avatar into the tag with the c-avatar component:
<template>
<c-box>
<c-tag>
<c-avatar
src="https://www.goodfreephotos.com/cache/people/female-face-woman-portrait_800.jpg?cached=1522399169"
size="xs"
name="Jane"
:ml="-1"
:mr="2"
/>
<c-tag-label>Jane</c-tag-label>
</c-tag>
</c-box>
</template>
<script>
import { CBox, CTag, CAvatar, CTagLabel } from "@chakra-ui/vue";
export default {
components: {
CBox,
CTag,
CAvatar,
CTagLabel,
},
};
</script>
ml sets the left margin in pixels.
mr sets the right margin in pixels.
Conclusion
We can add tags easily with Chakra UI Vue.
