Categories
Chakra UI Vue

UI Development with Chakra UI Vue — Number Input Styles and Popovers

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *