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.
Number Input Styles
We can change the button styles of the number input.
To do this, we write:
<template>
<c-box>
<c-number-input size="sm" :default-value="15" clamp-value-on-blur :max="30">
<c-number-input-field focus-border-color="red.200" />
<c-number-input-stepper>
<c-number-increment-stepper
bg="green.200"
:_active="{ bg: 'green.300' }"
>
+
</c-number-increment-stepper>
<c-number-decrement-stepper bg="pink.200" :_active="{ bg: 'pink.300' }">
-
</c-number-decrement-stepper>
</c-number-input-stepper>
</c-number-input>
</c-box>
</template>
<script>
import {
CBox,
CNumberInput,
CNumberInputField,
CNumberInputStepper,
CNumberIncrementStepper,
CNumberDecrementStepper,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CNumberInput,
CNumberInputField,
CNumberInputStepper,
CNumberIncrementStepper,
CNumberDecrementStepper,
},
data() {
return {
value: 15,
};
},
};
</script>
We set the bg
prop to set the background color of the stepper buttons.
_active
prop sets the styles that are applied when the buttons are active.
Popover
We can add a popover with the c-popover
component.
For instance, we can write:
<template>
<c-box>
<c-popover placement="top">
<c-popover-trigger>
<c-button>Trigger</c-button>
</c-popover-trigger>
<c-popover-content z-index="4">
<c-popover-arrow />
<c-popover-close-button />
<c-popover-header>Confirmation!</c-popover-header>
<c-popover-body>
Are you sure you want to have that milkshake?
</c-popover-body>
</c-popover-content>
</c-popover>
</c-box>
</template>
<script>
import {
CBox,
CButton,
CPopover,
CPopoverTrigger,
CPopoverContent,
CPopoverHeader,
CPopoverBody,
CPopoverArrow,
CPopoverCloseButton,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CButton,
CPopover,
CPopoverTrigger,
CPopoverContent,
CPopoverHeader,
CPopoverBody,
CPopoverArrow,
CPopoverCloseButton,
},
};
</script>
We add the popover with a few components.
c-popover
is the main container.
c-popover-trigger
has the button that triggers the popover.
c-popover-content
is the container for the popover content.
c-popover-arrow
is the popover arrow.
c-popover-close-button
is the popover close button.
c-popover-header
is the popover header.
c-popover-body
is th container for the main popover content.
We can get the state of the popover with some slot props:
<template>
<c-box>
<c-popover
initialFocusRef="#closeButton"
placement="right"
v-slot="{ isOpen, onClose }"
>
<c-popover-trigger>
<c-button>Click to {{ isOpen ? "close" : "open" }}</c-button>
</c-popover-trigger>
<c-popover-content z-index="4">
<c-popover-arrow />
<c-popover-close-button />
<c-popover-header>Confirmation!</c-popover-header>
<c-popover-body>
<c-box>
Hello. Nice to meet you! This is the body of the popover
</c-box>
<c-button
mt="4"
variantColor="blue"
@click="onClose"
id="closeButton"
>
Close
</c-button>
</c-popover-body>
</c-popover-content>
</c-popover>
</c-box>
</template>
<script>
import {
CBox,
CButton,
CPopover,
CPopoverTrigger,
CPopoverContent,
CPopoverHeader,
CPopoverBody,
CPopoverArrow,
CPopoverCloseButton,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CButton,
CPopover,
CPopoverTrigger,
CPopoverContent,
CPopoverHeader,
CPopoverBody,
CPopoverArrow,
CPopoverCloseButton,
},
};
</script>
isOpen
is true
when the popover is open.
onClose
is a function that closes the popover when we run it.
Conclusion
We can add number inputs and popovers with Chakra Vue UI.