Categories
Chakra UI Vue

UI Development with Chakra UI Vue — Alert Box

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.

Categories
Chakra UI Vue

UI Development with Chakra UI Vue — Accordions

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>

We register the CAccordion, CAccordionItem, CAccordionHeader, CAccordionPanel, and CAccordionIcon components to register the components that form the accordion.

CAccordion is the main container.

CAccordionItem is the item container.

CAccordionHeader is the item header.

CAccordionPanel is the item content container.

And CAccordionIcon is the icon for the header.

We can put a CBox inside it to house the content we want.

We can add the allow-multiple prop to let us open multiple accordion items at once:

<template>
  <c-accordion allow-multiple>
    <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>

Also, we can set the styles for the header when the accordion item is expanded with the _expanded prop:

<template>
  <c-accordion>
    <c-accordion-item>
      <c-accordion-header :_expanded="{ bg: 'tomato', color: 'white' }">
        <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>

bg is the background color and color is the text color.

The styles will be applied when the item is expanded.

We can get the expanded state of an item with the isExpanded slot prop:

<template>
  <c-accordion allow-toggle>
    <c-accordion-item v-slot="{ isExpanded }">
      <c-accordion-header>
        <c-box flex="1" text-align="left"> Section 1 title </c-box>
        <c-accordion-icon :name="isExpanded ? 'minus' : 'add'" />
      </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 2 </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>

In the example above, we use it to set the c-accordion-icon ‘s name prop.

Conclusion

We can add accordions easily into our Vue app with Chakra UI Vue.

Categories
Chakra UI Vue

Getting Started with UI Development 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.

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

Getting Started

We can install the Chakra UI Vue packages by running:

npm install @chakra-ui/vue @emotion/css

Then we can use it by writing:

main.js

import Vue from "vue";
import Chakra, { CThemeProvider } from "@chakra-ui/vue";
import App from "./App.vue";
Vue.use(Chakra);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(CThemeProvider, [h(App)])
}).$mount("#app");

App.vue

<template>
  <c-box>
    <c-button>
      click me
    </c-button>
  </c-box>
</template>

<script>
import { CBox, CButton } from '@chakra-ui/vue'

export default {
  name: 'App',
  components: {
    CBox,
    CButton
  }
}
</script>

In main.js , we register the Chakra plugin with Vue.use .

Then we apply the theme with CThemeProvider used with the render method.

In App.vue , we add the components that we registered, which includes CBox for a container and CButton for a button.

Now we should see a styled button displayed.

Responsive Styles

Chakra UI Vue supports responsive styles out of the box.

To add them, we can set a few props.

For instance, we can write:

<template>
  <div>
    <c-box
      height="40px"
      bg="green.400"
      :width="['100%', '50%', '25%', '15%']"
    />
    <c-box :fontSize="['sm', 'md', 'lg', 'xl']">Font Size</c-box>
    <c-box :mt="[2, 4, 6, 8]" width="full" height="24px" bg="tomato" />
    <c-box bg="papayawhip" :p="[2, 4, 6, 8]"> Padding </c-box>
  </div>
</template>

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

export default {
  name: "App",
  components: {
    CBox,
  },
};
</script>

We have the first c-box component with the width prop set to different sizes for different screen widths.

100% is the base width. 50% is set for 480px upwards. 25% is set for 768px upwards. And 15% is set for 992px upwards.

Likewise, in the 2nd c=box, we have the same sizes for different screen widths set for the fontSize . They’re in the same order as width.

In the 3rd c-box , we set the mt prop the same way. mt sets the top margin.

In the 4th c-box, we set the p prop to set the padding.

Now we don’t have to set any media queries to add responsive styles.

Conclusion

We can create good-looking responsive web apps easily with Chakra UI Vue.