Author: John Au-Yeung

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

Chakra UI Vue

UI Development with Chakra UI Vue — Checkbox

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

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.

Checkbox

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

For instance, we can write:

<template>
  <c-box>
    <c-checkbox default-is-checked>Checkbox</c-checkbox>
  </c-box>
</template>

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

We set the defualt-is-checked prop to make it checked by default.

Also, we can disable the checkbox with the is-disabled prop:

<template>
  <c-box>
    <c-checkbox is-disabled>Checkbox</c-checkbox>
  </c-box>
</template>

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

To change the color of the checkbox, we can set the variant-color prop:

<template>
  <c-box>
    <c-checkbox variant-color="red" default-is-checked> Checkbox </c-checkbox>
  </c-box>
</template>

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

We can change the size of the checkbox with the size prop:

<template>
  <c-box>
    <c-checkbox size="lg" variant-color="red" default-is-checked>
      Checkbox
    </c-checkbox>
  </c-box>
</template>

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

The is-indeterminate prop lets us set the checkbox to an indeterminate state:

<template>
  <c-box>
    <c-checkbox is-indeterminate> Checkbox </c-checkbox>
  </c-box>
</template>

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

To add a checkbox group, we can use the c-checkbox-group component:

<template>
  <c-box>
    <c-checkbox-group variant-color="green" :default-value="['apple', 'grape']">
      <c-checkbox value="apple">apple</c-checkbox>
      <c-checkbox value="orange">orange</c-checkbox>
      <c-checkbox value="grape">grape</c-checkbox>
    </c-checkbox-group>
  </c-box>
</template>

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

We add the default-value prop to set the checkbox with the given value prop value by default.

Conclusion

We can add a checkbox with Chakra UI Vue.

Chakra UI Vue

UI Development with Chakra UI Vue —Buttons

Post author By John Au-Yeung
Post date April 3, 2021
No Comments on UI Development with Chakra UI Vue —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.

Button

Chakra UI Vue comes with a button component.

To add it, we add the CButton component.

For instance, we can write:

<template>
  <c-box>
    <c-button variant-color="green">Button</c-button>
  </c-box>
</template>

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

We set the variant-color prop to set its background color.

To set the size of the button, we can set the size prop:

<template>
  <c-box>
    <c-button variant-color="green" size="lg">Button</c-button>
  </c-box>
</template>

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

lg stands for large.

We can also set it to xs for extra small, sm for small, or md for medium.

To change the look of the button, we can set the variant prop:

<template>
  <c-box>
    <c-button variant-color="green" variant="outline">Button</c-button>
  </c-box>
</template>

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

We set variant to outline to make the button have outlined style.

We can also set it to solid , ghost or link .

ghost adds a background color to the button only when we hover over it.

Also, we can add an icon in the button with:

<template>
  <c-box>
    <c-button left-icon="email" variant-color="blue" variant="solid">
      Email
    </c-button>
  </c-box>
</template>

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

left-icon sets the name of the icon to add.

We can make the button display a loading state with the isLoading prop.

loading-text has the button text to show when the button is in the loading state:

<template>
  <c-box>
    <c-button
      isLoading
      loading-text="Submitting"
      variant-color="blue"
      variant="solid"
    >
      Email
    </c-button>
  </c-box>
</template>

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

We can set other props to style the button.

To do this, we write:

<template>
  <c-box>
    <c-button height="50px" width="250px" border="2px" border-color="green.500">
      Email
    </c-button>
  </c-box>
</template>

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

We set the height , width , border , and border-color props to set the corresponding CSS properties.

Conclusion

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

React

Add a Diff Display into a React App with the jsdiff Library

Post author By John Au-Yeung
Post date April 3, 2021
No Comments on Add a Diff Display into a React App with the jsdiff Library

short-coated white and beige puppy on the floor

Sometimes, we may want to show the difference between 2 pieces of text to the user.

We can do this easily with the jsdiff library.

In this article, we’ll look at how we can use the jsdiff library with React.

Installation

We can install the library by running:

npm install diff --save

Add the Diff Display

We can add the diff display into our React app by writing the following:

import React from "react";
const Diff = require("diff");

const one = "beep boop";
const other = "beep boob blah";

const diff = Diff.diffChars(one, other);
export default function App() {
  return (
    <div className="App">
      {diff.map((part) => {
        const color = part.added ? "green" : part.removed ? "red" : "grey";
        return <span style={{ color }}>{part.value}</span>;
      })}
    </div>
  );
}

The one and other strings are what we want to diff.

We call Diff.diffChars with both of them to create the diff array.

Then we call diff.map to map the diffed parts to span elements.

part.added is true when the part is in the 2nd string but not the first.

part.removed is true when the part isn’t in the 2nd string but it’s in the first.

part.value has the value of the part.

Now we should see the comparisons displayed.

The display will show the 2nd string which is the other string, with the parts that are added to the first string in green and the parts that are removed from the first string in red.

We can show diffed JSON objects ith the diffJson method.

To use it, we write:

import React from "react";
const Diff = require("diff");

const one = { foo: "bar", bar: "baz" };
const other = { foo: "bar", bar: "bar" };

const diff = Diff.diffJson(one, other);
export default function App() {
  return (
    <div className="App">
      {diff.map((part) => {
        const color = part.added ? "green" : part.removed ? "red" : "grey";
        return <span style={{ color }}>{part.value}</span>;
      })}
    </div>
  );
}

It’ll show the properties that are added, removed, or stay the same with the same colors that we set.

Other methods include the diffTrimmedLines method to compare text line by line ignoring leading and trailing whitespace.

diffSentences compares 2 blocks of text sentence by sentence.

diffCss compares 2 CSS tokens.

diffArrays compare the entries of 2 arrays with the === operator.

They all return an array of objects with the same properties as in the examples.

Conclusion

We can use the jsdiff library with React to show text diffs to users easily.

Chakra UI Vue

UI Development with Chakra UI Vue — Breadcrumbs

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

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.

Breadcrumbs

Chakra UI Vue comes with a breadcrumb component we can use to add navigation.

To add it, we write:

<template>
  <c-box maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
    <c-breadcrumb :add-separator="false">
      <c-breadcrumb-item>
        <c-breadcrumb-link href="/google">Breadcrumb 1</c-breadcrumb-link>
        <c-breadcrumb-separator
          color="tomato"
          font-size="10px"
          font-weight="bold"
        />
      </c-breadcrumb-item>

<c-breadcrumb-item>
        <c-breadcrumb-link href="/yahoo">Breadcrumb 2</c-breadcrumb-link>
        <c-breadcrumb-separator color="firebrick" font-size="20px" />
      </c-breadcrumb-item>

      <c-breadcrumb-item isCurrentPage>
        <c-breadcrumb-link href="/about">Breadcrumb 2</c-breadcrumb-link>
      </c-breadcrumb-item>
    </c-breadcrumb>
  </c-box>
</template>

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

We register the CBreadcrumb, CBreadcrumbItem, CBreadcrumbLink, and CBreadcrumbSeparator components to add breadcrumbs into our app.

CBreadcrumb is the main container.

CBreadcrumbItem is the container for a breadcrumb item.

CBreadcrumbLink is a breadcrumb link component.

And CBreadcrumbSeparator is the breadcrumb item separator.

href has the URL to go to when we click on the link.

If we use Vue Router or Nuxt, we can as the as prop to router-link or nuxt-link respectively.

And we set the URL with the to prop instead of href .

Conclusion

We can add breadcrumbs into our Vue app with Chakra UI Vue.

Chakra UI Vue

UI Development with Chakra UI Vue — Box

Post author By John Au-Yeung
Post date April 3, 2021
No Comments on UI Development with Chakra UI Vue — 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.

Box

We can use the c-box component to add a flex container into our Vue app.

For instance, we can write:

<template>
  <c-box bg="tomato" w="100%" p="4" color="white"> This is the Box </c-box>
</template>

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

to add a container with c-box .

bg is the background color.

w is the width.

p is the padding in pixels.

color is the content color.

We can use c-box to house other components.

For instance, we can write:

<template>
  <c-box maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
    <c-image
      src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
    />
    <c-box d="flex" align-items="baseline">
      <c-badge rounded="full" px="2" variant-color="green"> New </c-badge>
      <c-box
        color="gray.500"
        font-weight="semibold"
        letter-spacing="wide"
        font-size="xs"
        text-transform="uppercase"
        ml="2"
      >
        2 beds &bull; 2 baths
      </c-box>
    </c-box>
  </c-box>
</template>

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

to add an image with the c-image component inside.

And we have another c-box inside the outer one.

We make it a flex container with the d prop set to flex .

align-items set the align-items CSS property.

border-width sets the border width.

rounded adds border-radius.

maxW sets the max-width.

Conclusion

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