Category: Chakra UI Vue

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.

Grid Layout

We can add a grid layout with the c-grid component.

For instance, we can write:

<template>
  <c-box>
    <c-grid w="600px" template-columns="repeat(5, 1fr)" gap="6">
      <c-box w="100%" h="10" bg="blue.300" />
      <c-box w="100%" h="10" bg="vue.300" />
      <c-box w="100%" h="10" bg="orange.300" />
      <c-box w="100%" h="10" bg="pink.300" />
      <c-box w="100%" h="10" bg="red.300" />
    </c-grid>
  </c-box>
</template>

<script>
import { CBox, CGrid } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CGrid,
  },
};
</script>

to add a grid container with it.

template-columns lets us define the columns for the grid.

gap lets us set the gap between each grid item.

Then we have c-box inside it to add the grid items.

w is the width. h is the height. bg is the background color.

Heading

We can add a heading with the c-heading component.

For example, we can write:

<template>
  <c-box>
    <c-heading>I'm a Heading</c-heading>
  </c-box>
</template>

<script>
import { CBox, CHeading } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CHeading,
  },
};
</script>

We can set the tag that it’s rendered as with the as prop.

The size prop sets the size of the heading.

For example, we can write:

<template>
  <c-box>
    <c-heading as="h1" size="2xl">I'm a Heading</c-heading>
  </c-box>
</template>

<script>
import { CBox, CHeading } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CHeading,
  },
};
</script>

to set the tag and size.

2xl is the biggest size.

Other sizes include xl , lg , md , sm , and xs .

xl is extra large. lg is large. md is medium. sm is small and xs is extra small.

We can also change the font size with the fontSize prop:

<template>
  <c-box>
    <c-heading as="h1" fontSize="50px">I'm a Heading</c-heading>
  </c-box>
</template>

<script>
import { CBox, CHeading } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CHeading,
  },
};
</script>

Conclusion

We can add a grid layout and heading with Chakra UI Vue.

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.

Flex Container

We can add a flex container with the c-flex component.

For instance, we can write:

<template>
  <c-box>
    <c-flex align="center">
      <c-flex bg="green.50" align="flex-end">
        <c-text>Box 1</c-text>
      </c-flex>
      <c-flex bg="blue.50" size="150px" align="center" justify="center">
        <c-text text-align="center" bg="orange.50"> Box 2 </c-text>
      </c-flex>
      <c-box>
        <c-text bg="tomato" color="white"> Box 3 </c-text>
      </c-box>
    </c-flex>
  </c-box>
</template>

<script>
import { CBox, CFlex, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CFlex,
    CText,
  },
};
</script>

We add the c-flex component to add a container that has the CSS display property set to flex .

The bg prop sets the background color.

align sets the justify-items CSS property.

text-align sets the text-align CSS property.

size sets the width and height.

Form Control

We can add a form control container with the c-form-control component.

For instance, we can write:

<template>
  <c-box>
    <c-form-control>
      <c-form-label for="email">Email address</c-form-label>
      <c-input type="email" id="email" />
      <c-form-helper-text> We'll never share your email. </c-form-helper-text>
    </c-form-control>
  </c-box>
</template>

<script>
import {
  CBox,
  CFormControl,
  CFormLabel,
  CFormHelperText,
  CInput,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CFormControl,
    CFormLabel,
    CFormHelperText,
    CInput,
  },
};
</script>

We add the c-form-label component to add a label for the input.

c-input is a text input.

c-form-helper-text is a container for the helper text.

Radio Button

We can put radio buttons inside a c-form-control .

To do that, we write:

<template>
  <c-box>
    <c-form-control>
      <c-form-label as="legend">Favorite fruit</c-form-label>
      <c-radio-group default-value="orange">
        <c-radio value="apple">apple</c-radio>
        <c-radio value="orange">orange</c-radio>
        <c-radio value="grape">grape</c-radio>
      </c-radio-group>
      <c-form-helper-text> Select only if you're a fan. </c-form-helper-text>
    </c-form-control>
  </c-box>
</template>

<script>
import {
  CBox,
  CFormControl,
  CFormLabel,
  CFormHelperText,
  CRadio,
  CRadioGroup,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CFormControl,
    CFormLabel,
    CFormHelperText,
    CRadio,
    CRadioGroup,
  },
};
</script>

We add the c-radio-group component to group the c-radio components.

as sets the tag to render the component as.

default-value sets the default value to pick from the group.

Each c-radio component has a value prop to set the value.

Conclusion

We can add flex containers and form controls with Chakra UI Vue.

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.

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.

Divider

Chakra UI Vue comes with a divider component.

To add it, we write:

<template>
  <c-box>
    <p>Part 1</p>
    <c-divider />
    <p>Part 2</p>
  </c-box>
</template>

<script>
import { CBox, CDivider } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CDivider,
  },
};
</script>

to add a horizontal divider with the c-divider component.

We can also add a vertical divider with:

<template>
  <c-flex>
    <span>Part 1</span>
    <c-divider orientation="vertical" />
    <span>Part 2</span>
  </c-flex>
</template>

<script>
import { CFlex, CDivider } from "@chakra-ui/vue";
export default {
  components: {
    CFlex,
    CDivider,
  },
};
</script>

We just set orientation to vertical to add it.

And we can change the border color with the border-color prop:

<template>
  <c-box>
    <p>Part 1</p>
    <c-divider border-color="red.200" />
    <p>Part 2</p>
  </c-box>
</template>
<script>
import { CBox, CDivider } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CDivider,
  },
};
</script>

Drawer

Chakra UI Vue comes with components to let us add a drawer into our Vue app.

To add it, we write:

<template>
  <c-box>
    <c-button ref="btnRef" @click="isOpen = true">Open Drawer</c-button>

    <c-drawer
      :isOpen="isOpen"
      placement="right"
      :on-close="close"
      :initialFocusRef="() => $refs.inputInsideModal"
    >
      <c-drawer-overlay />
      <c-drawer-content>
        <c-drawer-close-button />
        <c-drawer-header>Create your account</c-drawer-header>

         <c-drawer-body>
          <c-input ref="inputInsideModal" placeholder="Type here..." />
        </c-drawer-body>

        <c-drawer-footer>
          <c-button variant="outline" mr="3" @click="isOpen = false"
            >Cancel</c-button
          >
          <c-button variant-color="blue">Save</c-button>
        </c-drawer-footer>
      </c-drawer-content>
    </c-drawer>
  </c-box>
</template>
<script>
import {
  CBox,
  CInput,
  CButton,
  CDrawer,
  CDrawerBody,
  CDrawerFooter,
  CDrawerHeader,
  CDrawerOverlay,
  CDrawerContent,
  CDrawerCloseButton,
} from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CInput,
    CButton,
    CDrawer,
    CDrawerBody,
    CDrawerFooter,
    CDrawerHeader,
    CDrawerOverlay,
    CDrawerContent,
    CDrawerCloseButton,
  },
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    close() {
      this.isOpen = false;
    },
  },
};
</script>

We import and register the CDrawer, CDrawerBody, CDrawerFooter, CDrawerHeader, CDrawerOverlay, CDrawerContent, and CDrawerCloseButton components to add a drawer.

CDrawer is the main drawer container.

CDrawerBody is the container for the drawer body.

CDrawerFooter is the container for the drawer footer.

CDrawerHeader is the container for the drawer header.

CDrawerOverlay is the drawer overlay.

CDrawerContent is the container for the drawer content.

CDrawerCloseButton is the drawer close button.

We set the isOpen prop to the isOpen reactive property to let us control when to open or close the drawer.

The c-button opens the drawer since isOpen is set to true when we click it.

initialFocusRef sets the element that we want to focus on initially when the drawer is opened.

placement sets the drawer placement. We can set it to top, right, bottom, or left .

Conclusion

We can add a divider and drawer easily with Chakra UI Vue.

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.

Control Box

We can use the c-control-box component to add a component that changes styles based on a sibling checkbox or radio input.

For instance, we can write:

<template>
  <c-box>
     <label>
      <c-visually-hidden as="input" type="checkbox" default-checked />
      <c-control-box
        border-width="1px"
        size="24px"
        rounded="sm"
        :_checked="{ bg: 'green.500', color: 'white', borderColor: 'green.500' }""
        :_focus="{ borderColor: 'green.600', boxShadow: 'outline' }""
      >
        <c-icon name="check" size="16px" />
      </c-control-box>
      <c-box as="span" vertical-align="top" ml="3">
        Checkbox Label
      </c-box>
    </label>
  </c-box>
</template>

<script>
import { CBox, CControlBox, CIcon, CVisuallyHidden } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CControlBox,
    CIcon,
    CVisuallyHidden,
  },
};
</script>

We have the c-control-box component with the _checked prop to set the bg and color props of the c-visually-hidden component when it’s toggled.

And we have the _focus prop to set the borderColor and boxShadow styles of c-visually-hidden when we focus on the checkbox by clicking it.

We can do the same with a radio button:

<template>
  <c-box>
    <label>
      <c-visually-hidden type="radio" as="input" />
      <c-control-box
        size="24px"
        bg="white"
        border="2px"
        rounded="full"
        type="radio"
        borderColor="inherit"
        :_focus="{ boxShadow: 'outline' }"
        :_hover="{ borderColor: 'gray.300' }"
        :_disabled="{ opacity: '40%' }"
        :_checked="{ bg: 'green.500', borderColor: 'green.500' }"
      >
        <c-box w="50%" h="50%" bg="white" rounded="full" />
      </c-control-box>
      <c-box as="span" ml="2" vertical-align="center" user-select="none">
        This is a Radio
      </c-box>
    </label>
  </c-box>
</template>

<script>
import { CBox, CControlBox, CVisuallyHidden } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CControlBox,
    CVisuallyHidden,
  },
};
</script>

We have the _disabled prop to set the styles of c-visually-hidden when it’s disabled.

And we have the _hover prop to set the styles of c-visually-hidden when we hover over it.

Conclusion

We can use the c-control-box component to add a component that changes styles based on a sibling checkbox or radio input into our Vue app.