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.
Alert
We can add an alert box into our Vue app with Chakra UI Vue.
To add it, we write:
<template>
<c-alert status="error">
<c-alert-icon />
<c-alert-title :mr="2">Your browser is outdated!</c-alert-title>
<c-alert-description> Your experience may be degraded.</c-alert-description>
<c-close-button position="absolute" right="8px" top="8px" />
</c-alert>
</template>
<script>
import {
CAlert,
CAlertIcon,
CAlertTitle,
CAlertDescription,
} from "@chakra-ui/vue";
export default {
name: "App",
components: {
CAlert,
CAlertIcon,
CAlertTitle,
CAlertDescription,
},
};
</script>
We register the CAlert
, CAlertIcon
, CAlertTitle
, and CAlertDescription
components.
CAlert
is the main container.
CAlertIcon
is the alert box icon.
CAlertTitle
is the alert box title.
CAlertDescription
is the alert box content.
status
is set to 'error'
makes the box and icon red.
We can also set it to info
to make them blue, success
to make them green, or warning
to make them yellow.
Also, we can set the variant
prop to change the shade of the colors.
For instance, we can write:
<template>
<c-alert status="error" variant="solid">
<c-alert-icon />
<c-alert-title :mr="2">Your browser is outdated!</c-alert-title>
<c-alert-description> Your experience may be degraded.</c-alert-description>
<c-close-button position="absolute" right="8px" top="8px" />
</c-alert>
</template>
<script>
import {
CAlert,
CAlertIcon,
CAlertTitle,
CAlertDescription,
} from "@chakra-ui/vue";
export default {
name: "App",
components: {
CAlert,
CAlertIcon,
CAlertTitle,
CAlertDescription,
},
};
</script>
to set variant
to solid
to make the background color redder.
We can also set it to subtle
to make it more subtle, left-accent
adds a darker color to the left side.
top-accent
adds a darker color to the top.
We can add props to add flexbox layout to our alert box.
For instance, we can write:
<template>
<c-alert
status="error"
flexDirection="column"
justifyContent="center"
textAlign="center"
height="200px"
>
<c-alert-icon />
<c-alert-title :mr="2">Your browser is outdated!</c-alert-title>
<c-alert-description> Your experience may be degraded.</c-alert-description>
<c-close-button position="absolute" right="8px" top="8px" />
</c-alert>
</template>
<script>
import {
CAlert,
CAlertIcon,
CAlertTitle,
CAlertDescription,
} from "@chakra-ui/vue";
export default {
name: "App",
components: {
CAlert,
CAlertIcon,
CAlertTitle,
CAlertDescription,
},
};
</script>
flexDirection
sets the flex-direction
CSS property.
justifyContent
sets the justify-content
CSS property.
textAlign
sets the text-align
CSS property.
Conclusion
We can add an alert box easily with Chakra UI Vue.