Category: Chakra UI Vue

Categories
Chakra UI Vue

UI Development with Chakra UI Vue — Tags

white and brown long coated small dog

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.

Tags

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

For instance, we can write:

<template>
  <c-box>
    <c-tag>Awesome Tag</c-tag>
  </c-box>
</template>

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

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

to add a simple tag with the c-tag component.

We can set the size of the tag with the size prop and set the background color with the variantColor prop:

<template>
  <c-box>
    <c-tag size="sm" variantColor="vue">Awesome Tag</c-tag>
  </c-box>
</template>

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

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

size can be sm , md or lg ordered from smallest to largest.

We can add a left icon with c-tag-icon :

<template>
  <c-box>
    <c-tag>
      <c-tag-icon icon="add" size="12px" />
      <c-tag-label>Awesome Tag</c-tag-label>
    </c-tag>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CTag,
    CTagIcon,
    CTagLabel,
  },
};
</script>

We put our tag text in c-tag-label .

icon has the icon name and size has the icon size.

We can add a close button to the tag with the c-tag-close-button component:

<template>
  <c-box>
    <c-tag>
      <c-tag-label>Awesome Tag</c-tag-label>
      <c-tag-close-button />
    </c-tag>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CTag,
    CTagCloseButton,
    CTagLabel,
  },
};
</script>

We can add an avatar into the tag with the c-avatar component:

<template>
  <c-box>
    <c-tag>
      <c-avatar
        src="https://www.goodfreephotos.com/cache/people/female-face-woman-portrait_800.jpg?cached=1522399169"
        size="xs"
        name="Jane"
        :ml="-1"
        :mr="2"
      />
      <c-tag-label>Jane</c-tag-label>
    </c-tag>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CTag,
    CAvatar,
    CTagLabel,
  },
};
</script>

ml sets the left margin in pixels.

mr sets the right margin in pixels.

Conclusion

We can add tags easily with Chakra UI Vue.

Categories
Chakra UI Vue

UI Development with Chakra UI Vue — Tabs

Labrador retriever puppy walking on green grass

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.

Tabs

We can add tabs with Chakra UI Vue.

To add them, we write:

<template>
  <c-box>
    <c-tabs>
      <c-tab-list>
        <c-tab>One</c-tab>
        <c-tab>Two</c-tab>
        <c-tab>Three</c-tab>
      </c-tab-list>

      <c-tab-panels>
        <c-tab-panel>
          <p>one</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>two</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>three</p>
        </c-tab-panel>
      </c-tab-panels>
    </c-tabs>
  </c-box>
</template>

<script>
import {
  CBox,
  CTab,
  CTabs,
  CTabList,
  CTabPanel,
  CTabPanels,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTab,
    CTabs,
    CTabList,
    CTabPanel,
    CTabPanels,
  },
};
</script>

We add the c-tabs component to add the tab and tab panel container.

c-tab-list is the container for the tabs.

c-tab wraps the content of each tab.

c-tab-panels has the tab panels.

c-tab-panel has the tab panel.

We can change the style of the tabs with the variant prop:

<template>
  <c-box>
    <c-tabs variant="enclosed">
      <c-tab-list>
        <c-tab>One</c-tab>
        <c-tab>Two</c-tab>
        <c-tab>Three</c-tab>
      </c-tab-list>

      <c-tab-panels>
        <c-tab-panel>
          <p>one</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>two</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>three</p>
        </c-tab-panel>
      </c-tab-panels>
    </c-tabs>
  </c-box>
</template>

<script>
import {
  CBox,
  CTab,
  CTabs,
  CTabList,
  CTabPanel,
  CTabPanels,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTab,
    CTabs,
    CTabList,
    CTabPanel,
    CTabPanels,
  },
};
</script>

The possible values for variant is:

  • line
  • enclosed
  • enclosed-colored
  • soft-rounded
  • solid-rounded
  • unstyled

We can set the variant-color prop with:

<template>
  <c-box>
    <c-tabs variant="soft-rounded" variant-color="green">
      <c-tab-list>
        <c-tab>One</c-tab>
        <c-tab>Two</c-tab>
        <c-tab>Three</c-tab>
      </c-tab-list>

      <c-tab-panels>
        <c-tab-panel>
          <p>one</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>two</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>three</p>
        </c-tab-panel>
      </c-tab-panels>
    </c-tabs>
  </c-box>
</template>

<script>
import {
  CBox,
  CTab,
  CTabs,
  CTabList,
  CTabPanel,
  CTabPanels,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTab,
    CTabs,
    CTabList,
    CTabPanel,
    CTabPanels,
  },
};
</script>

to set the background color of the tabs when selected.

We can set the tab size with the size prop:

<template>
  <c-box>
    <c-tabs variant="soft-rounded" size="sm" variant-color="green">
      <c-tab-list>
        <c-tab>One</c-tab>
        <c-tab>Two</c-tab>
        <c-tab>Three</c-tab>
      </c-tab-list>

<c-tab-panels>
        <c-tab-panel>
          <p>one</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>two</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>three</p>
        </c-tab-panel>
      </c-tab-panels>
    </c-tabs>
  </c-box>
</template>

<script>
import {
  CBox,
  CTab,
  CTabs,
  CTabList,
  CTabPanel,
  CTabPanels,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTab,
    CTabs,
    CTabList,
    CTabPanel,
    CTabPanels,
  },
};
</script>

size can be sm , md or lg , ordered from smallest to largest.

We can change the alignment of the tabs with the align prop:

<template>
  <c-box>
    <c-tabs align="end">
      <c-tab-list>
        <c-tab>One</c-tab>
        <c-tab>Two</c-tab>
        <c-tab>Three</c-tab>
      </c-tab-list>

      <c-tab-panels>
        <c-tab-panel>
          <p>one</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>two</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>three</p>
        </c-tab-panel>
      </c-tab-panels>
    </c-tabs>
  </c-box>
</template>

<script>
import {
  CBox,
  CTab,
  CTabs,
  CTabList,
  CTabPanel,
  CTabPanels,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTab,
    CTabs,
    CTabList,
    CTabPanel,
    CTabPanels,
  },
};
</script>

And we can make the tabs stretch to the width of the panel with the is-fitted prop:

<template>
  <c-box>
    <c-tabs is-fitted>
      <c-tab-list>
        <c-tab>One</c-tab>
        <c-tab>Two</c-tab>
        <c-tab>Three</c-tab>
      </c-tab-list>

      <c-tab-panels>
        <c-tab-panel>
          <p>one</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>two</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>three</p>
        </c-tab-panel>
      </c-tab-panels>
    </c-tabs>
  </c-box>
</template>

<script>
import {
  CBox,
  CTab,
  CTabs,
  CTabList,
  CTabPanel,
  CTabPanels,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTab,
    CTabs,
    CTabList,
    CTabPanel,
    CTabPanels,
  },
};
</script>

And we can set the default selected tab with the default-index prop:

<template>
  <c-box>
    <c-tabs :default-index="2">
      <c-tab-list>
        <c-tab>One</c-tab>
        <c-tab>Two</c-tab>
        <c-tab>Three</c-tab>
      </c-tab-list>

      <c-tab-panels>
        <c-tab-panel>
          <p>one</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>two</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>three</p>
        </c-tab-panel>
      </c-tab-panels>
    </c-tabs>
  </c-box>
</template>

<script>
import {
  CBox,
  CTab,
  CTabs,
  CTabList,
  CTabPanel,
  CTabPanels,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTab,
    CTabs,
    CTabList,
    CTabPanel,
    CTabPanels,
  },
};
</script>

And we can disable a tab with the is-disabled prop:

<template>
  <c-box>
    <c-tabs>
      <c-tab-list>
        <c-tab>One</c-tab>
        <c-tab is-disabled>>Two</c-tab>
        <c-tab>Three</c-tab>
      </c-tab-list>

      <c-tab-panels>
        <c-tab-panel>
          <p>one</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>two</p>
        </c-tab-panel>
        <c-tab-panel>
          <p>three</p>
        </c-tab-panel>
      </c-tab-panels>
    </c-tabs>
  </c-box>
</template>

<script>
import {
  CBox,
  CTab,
  CTabs,
  CTabList,
  CTabPanel,
  CTabPanels,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CTab,
    CTabs,
    CTabList,
    CTabPanel,
    CTabPanels,
  },
};
</script>

Conclusion

We can add tabs easily with Chakra UI Vue.

Categories
Chakra UI Vue

UI Development with Chakra UI Vue — Switch

white and brown shih tzu puppy

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.

Switch

We can add a switch component with Chakra UI Vue.

For instance, we can write:

<template>
  <c-box>
    <c-form-control>
      <c-form-label html-for="email-alerts">Enable email alerts?</c-form-label>
      <c-switch id="email-alerts" />
    </c-form-control>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CSwitch,
    CFormControl,
    CFormLabel,
  },
};
</script>

We can add a c-switch component to add a switch.

c-form-label is the label for the switch.

c-form-control is the container.

We can change its size with the size prop:

<template>
  <c-box>
    <c-switch size="lg" />
  </c-box>
</template>

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

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

lg makes it large.

We can also set it to sm to make it small, or md to make it medium-sized.

Also, we can change the color when the switch is on with the color prop:

<template>
  <c-box>
    <c-switch color="vue" />
  </c-box>
</template>

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

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

Conclusion

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

Categories
Chakra UI Vue

UI Development with Chakra UI Vue — Stack

selective focus photography of white dog

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.

Stack

We can add a stack of items onto the screen with the c-stack component.

For instance, we can write:

<template>
  <c-box>
    <c-stack :spacing="5">
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>See the Vue</c-heading>
        <c-text :mt="4">Vue.</c-text>
      </c-box>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>Go Nuxt</c-heading>
        <c-text :mt="4">Nuxt.</c-text>
      </c-box>
    </c-stack>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CStack,
    CHeading,
    CText,
  },
};
</script>

We wrap the c-stack from the c-box elements we want to stack together.

Then in the c-box elements, we add the c-heading and c-text components to add components for containers and text respectively.

Also, we can add the is-line prop to add containers side by side:

<template>
  <c-box>
    <c-stack :spacing="5" is-inline>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>See the Vue</c-heading>
        <c-text :mt="4">Vue.</c-text>
      </c-box>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>Go Nuxt</c-heading>
        <c-text :mt="4">Nuxt.</c-text>
      </c-box>
    </c-stack>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CStack,
    CHeading,
    CText,
  },
};
</script>

And we can use the is-reverse prop to reverse the order of the items:

<template>
  <c-box>
    <c-stack :spacing="5" is-reversed>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>See the Vue</c-heading>
        <c-text :mt="4">Vue.</c-text>
      </c-box>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>Go Nuxt</c-heading>
        <c-text :mt="4">Nuxt.</c-text>
      </c-box>
    </c-stack>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CStack,
    CHeading,
    CText,
  },
};
</script>

The 2nd c-box is now rendered first, then the 1st one is rendered below it.

We can also use it to stack HTML elements:

<template>
  <c-box>
    <c-stack>
      <c-text>Chakra component 1</c-text>
      <p>HTML paragraph element</p>
      <h3>HTML heading element</h3>
      <c-text>Chakra component 2</c-text>
    </c-stack>
  </c-box>
</template>

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

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

Conclusion

We can use Chakra UI Vue’s c-stack component to add stacked elements.

Categories
Chakra UI Vue

UI Development with Chakra UI Vue — Statistics Display

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.

Statistics Component

Chakra UI Vue comes with a component to display statistics.

To use it, we write:

<template>
  <c-box>
    <c-stat>
      <c-stat-label>Collected Fees</c-stat-label>
      <c-stat-number>$500.00</c-stat-number>
      <c-stat-helper-text>Jan 12 - Jan 28</c-stat-helper-text>
    </c-stat>
  </c-box>
</template>

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

export default {
  components: {
    CBox,
    CStat,
    CStatLabel,
    CStatNumber,
  },
};
</script>

We add the c-stat component to add the statistics container.

c-stat-label is the label for the statistic.

c-stat-number is the container for the statistic number.

c-stat-helper-text is the container for the helper text.

We can add a group of statistics with the c-stat-group component:

<template>
  <c-box>
    <c-stat-group>
      <c-stat>
        <c-stat-label>Sent</c-stat-label>
        <c-stat-number>676585</c-stat-number>
        <c-stat-helper-text>
          <c-stat-arrow type="increase" />
          30.60%
        </c-stat-helper-text>
      </c-stat>
      <c-stat>
        <c-stat-label>Clicked</c-stat-label>
        <c-stat-number>45</c-stat-number>
        <c-stat-helper-text>
          <c-stat-arrow type="decrease" />
          -5.20%
        </c-stat-helper-text>
      </c-stat>
    </c-stat-group>
  </c-box>
</template>

<script>
import {
  CBox,
  CStat,
  CStatLabel,
  CStatNumber,
  CStatHelpText,
  CStatArrow,
  CStatGroup,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CStat,
    CStatLabel,
    CStatNumber,
    CStatHelpText,
    CStatArrow,
    CStatGroup,
  },
};
</script>

We wrap c-stat-group from multiple c-stat components.

Also, we add the c-stat-arrow component to add arrows for increases and increases, which are set by the type prop.

Conclusion

We can a statistic display with Chakra UI Vue.