UI Development with Chakra UI Vue — Accordions

Photo by Davies Designs Studio on Unsplash

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

In this article, we’ll look at how to get started with UI development with Chakra UI Vue.

Accordions

Chakra UI Vue comes with an accordion component.

To use it, we can write:

<template>
  <c-accordion>
    <c-accordion-item>
      <c-accordion-header>
        <c-box flex="1" text-align="left"> Section 1 title </c-box>
        <c-accordion-icon />
      </c-accordion-header>
      <c-accordion-panel pb="4"> Lorem ipsum 1 </c-accordion-panel>
    </c-accordion-item>
    <c-accordion-item>
      <c-accordion-header>
        <c-box flex="1" text-align="left"> Section 2 title </c-box>
        <c-accordion-icon />
      </c-accordion-header>
      <c-accordion-panel pb="4"> Lorem ipsum 1 </c-accordion-panel>
    </c-accordion-item>
  </c-accordion>
</template>
<script>
import {
  CBox,
  CAccordion,
  CAccordionItem,
  CAccordionHeader,
  CAccordionPanel,
  CAccordionIcon,
} from "@chakra-ui/vue";
export default {
  name: "App",
  components: {
    CBox,
    CAccordion,
    CAccordionItem,
    CAccordionHeader,
    CAccordionPanel,
    CAccordionIcon,
  },
};
</script>