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.
Text
We can add text into our Vue app with Chakra UI Vue’s c-text component.
For instance, we can write:
<template>
<c-box>
<c-text>Text</c-text>
</c-box>
</template>
<script>
import { CBox, CText } from "@chakra-ui/vue";
export default {
components: {
CBox,
CText,
},
};
</script>
to add styled text with c-text .
The text style would match Chakra UI Vue styles.
We can change the font size with the fontSize prop:
<template>
<c-box>
<c-text fontSize="6xl">Text</c-text>
</c-box>
</template>
<script>
import { CBox, CText } from "@chakra-ui/vue";
export default {
components: {
CBox,
CText,
},
};
</script>
Values of fontSize can be xs , sm , md , lg , xk , 2xl , 3xl , 4xl , 5xl , or 6xl ordered from smallest to largest.
We can truncate text when it’s wider than the viewport or the value of the maxWidth prop with the is-truncated prop:
<template>
<c-box>
<c-text is-truncated>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a
lobortis sapien, nec viverra elit</c-text
>
</c-box>
</template>
<script>
import { CBox, CText } from "@chakra-ui/vue";
export default {
components: {
CBox,
CText,
},
};
</script>
Also we can use the as prop to render the text as the given element:
<template>
<c-box>
<c-text as="s">Strikethrough</c-text>
</c-box>
</template>
<script>
import { CBox, CText } from "@chakra-ui/vue";
export default {
components: {
CBox,
CText,
},
};
</script>
We set as to s so we render the text as the s element, which renders as strikethrough text.
Conclusion
We can add styled text to our Vue app with Chakra UI Vue’s c-text component.
