Author: John Au-Yeung

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

Chakra UI Vue

UI Development with Chakra UI Vue — Radio Buttons

Post author By John Au-Yeung
Post date April 6, 2021
No Comments on UI Development with Chakra UI Vue — Radio Buttons

girl crawling on white floor while smiling

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.

Radio Buttons

We can add radio buttons with the c-radio-group and c-radio components.

For instance, we can write:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <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-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

We bind the selected value to a reactive property with v-model .

c-radio has the radio buttons.

We can change the color of the radio button with the variant-color prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio variant-color="red" value="apple">apple</c-radio>
      <c-radio variant-color="orange" value="orange">orange </c-radio>
      <c-radio value="grape">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

The size prop lets us set the size:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape" size="lg">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

lg makes it large. We can also set it to sm to make it small or md for medium size.

We can disable a button with the is-disabled prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape" is-disabled>>grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

And we can make the radio buttons display side by side with the is-inline prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit" is-inline>
      <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-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

Conclusion

We can add radio buttons with Chakra UI Vue.

Chakra UI Vue

UI Development with Chakra UI Vue — Radio Buttons

Post author By John Au-Yeung
Post date April 4, 2021
No Comments on UI Development with Chakra UI Vue — Radio Buttons

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.

Radio Buttons

We can add radio buttons with the c-radio-group and c-radio components.

For instance, we can write:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <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-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

We bind the selected value to a reactive property with v-model .

c-radio has the radio buttons.

We can change the color of the radio button with the variant-color prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio variant-color="red" value="apple">apple</c-radio>
      <c-radio variant-color="orange" value="orange">orange </c-radio>
      <c-radio value="grape">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

The size prop lets us set the size:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape" size="lg">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

lg makes it large. We can also set it to sm to make it small or md for medium size.

We can disable a button with the is-disabled prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape" is-disabled>>grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

And we can make the radio buttons display side by side with the is-inline prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit" is-inline>
      <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-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

Conclusion

We can add radio buttons with Chakra UI Vue.

Chakra UI Vue

UI Development with Chakra UI Vue — Progress Bar

Post author By John Au-Yeung
Post date April 4, 2021
No Comments on UI Development with Chakra UI Vue — Progress Bar

selective focus photography of sleeping baby

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.

Progress Bar

We can add a progress bar into our Vue app with the c-progress component.

For instance, we can write:

<template>
  <c-box>
    <c-progress :value="80" />
  </c-box>
</template>

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

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

value has the progress value between 0 and 100.

We can change the size with the size prop:

<template>
  <c-box>
    <c-progress :value="80" size="lg" />
  </c-box>
</template>

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

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

lg makes it large.

We can also set it to sm for small or md for large.

Also, we can set its height with the height prop:

<template>
  <c-box>
    <c-progress :value="80" height="32px" />
  </c-box>
</template>

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

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

We can make it animated with the is-animated prop:

<template>
  <c-box>
    <c-progress :value="80" has-stripe is-animated />
  </c-box>
</template>

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

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

has-stripe adds stripes to the progress bar.

Conclusion

We can add progress bars into our Vue app with Chakra UI Vue.

Chakra UI Vue

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

Post author By John Au-Yeung
Post date April 4, 2021
No Comments on UI Development with Chakra UI Vue — Number Input Styles and Popovers

selective focus photography of seal lying on ground

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.

Chakra UI Vue

UI Development with Chakra UI Vue — Slider

Post author By John Au-Yeung
Post date April 4, 2021
No Comments on UI Development with Chakra UI Vue — Slider

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.

Slider

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

For instance, we can write:

<template>
  <c-box>
    <c-slider :max="20" @change="handleChange" :value="value">
      <c-slider-track />
      <c-slider-filled-track />
      <c-slider-thumb />
    </c-slider>
  </c-box>
</template>

<script>
import {
  CBox,
  CSlider,
  CSliderTrack,
  CSliderThumb,
  CSliderFilledTrack,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSlider,
    CSliderTrack,
    CSliderThumb,
    CSliderFilledTrack,
  },
  data() {
    return {
      value: 15,
    };
  },
  methods: {
    handleChange(val) {
      this.value = val;
    },
  },
};
</script>

We set the value prop to set its value.

The max prop set the max allowed value.

@change is set to a function that updates the value .

c-slider-track has the empty part of the slider track.

c-slider-filled-track has the filled part of the slider track.

c-slider-thumb has the slider button.

We can change the slider color with the color prop:

<template>
  <c-box>
    <c-slider color="pink" :max="20" @change="handleChange" :value="value">
      <c-slider-track />
      <c-slider-filled-track />
      <c-slider-thumb />
    </c-slider>
  </c-box>
</template>

<script>
import {
  CBox,
  CSlider,
  CSliderTrack,
  CSliderThumb,
  CSliderFilledTrack,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSlider,
    CSliderTrack,
    CSliderThumb,
    CSliderFilledTrack,
  },
  data() {
    return {
      value: 15,
    };
  },
  methods: {
    handleChange(val) {
      this.value = val;
    },
  },
};
</script>

Conclusion

We can add a slider into our Vue app with Chakra UI Vue.