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.
Editable Text Input
We can set the drawer placement with the placement prop.
For instance, we can write:
<template>
<c-box>
<c-editable default-value="Hello world" font-size="2xl">
<c-editable-preview />
<c-editable-input />
</c-editable>
</c-box>
</template>
<script>
import {
CBox,
CEditable,
CEditableInput,
CEditablePreview,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CEditable,
CEditableInput,
CEditablePreview,
},
};
</script>
We register the CEditable, CEditableInput, CEditablePreview components to add the editable text input.
CEditable is the main input wrapper.
CEditableInput is the input itself.
CEditablePreview has the preview of the inputted text.
We can add custom components for the input in place of the default ones.
To do this, we write:
<template>
<c-box>
<c-editable default-value="Hello World" font-size="2xl">
<template v-slot="{ isEditing, onSubmit, onCancel, onRequestEdit }">
<c-editable-preview />
<c-editable-input />
<c-flex mt="3">
<c-button-group v-if="isEditing" size="sm">
<c-icon-button icon="check" color="green"@click="onSubmit" />
<c-icon-button icon="close"@click="onCancel" />
</c-button-group>
<c-icon-button v-else icon="edit" size="sm"@click="onRequestEdit" />
</c-flex>
</template>
</c-editable>
</c-box>
</template>
<script>
import {
CBox,
CEditable,
CEditableInput,
CEditablePreview,
CFlex,
CIconButton,
CButtonGroup,
} from "@chakra-ui/vue";
export default {
components: {
CBox,
CEditable,
CEditableInput,
CEditablePreview,
CFlex,
CIconButton,
CButtonGroup,
},
};
</script>
We populate the default slot with some buttons in a button group.
The slot props have the onSubmit method that’s run when we click the check button.
onCancel is run when we click the close button. It’ll set isEditing to false .
It’s called when we press the Esc key.
onRequestEdit is a function that sets isEditing to true .
It’s called when we press Enter.
Conclusion
We can add an editable text input easily with Chakra UI Vue.
