Box

CBox is the most abstract component on top of which all other @chakra-ui/vue components are built. By default, it renders a div element.

The CBox component is useful because it helps with three common use cases:

  • Creation of responsive layouts with ease.
  • Provides a shorthand way to pass styles via props (bg instead of backgroundColor).
  • Composition of new components by providing for overrides by using the as prop.

Import#

import { CBox } from '@chakra-ui/vue';

Usage#

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

Composition with CBox#

New
3 beds • 2 baths

Modern home in city center in the heart of historic Los Angeles

$1,900.00 / wk
34 reviews
Editable Example 
<template>
  <c-box maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
    <c-image :src="property.imageUrl" :alt="property.imageAlt" />
    <c-box p="6">
      <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"
        >
          {{ property.beds }} beds &bull; {{ property.baths }} baths
        </c-box>
      </c-box>
      <c-box
        mt="1"
        font-weight="semibold"
        as="h4"
        line-height="tight"
        is-truncated
      >
        {{ property.title }}
      </c-box>
      <c-box>
        {{ property.formattedPrice }}
        <c-box as="span" color="gray.600" fontSize="sm">
          / wk
        </c-box>
      </c-box>
      <c-box d="flex" mt="2" align-items="center">
        <c-icon
          v-for="(_, i) in Array(5).fill('')"
          name="star"
          :key="i"
          :color="i < property.rating ? 'green.500' : 'gray.300'"
        />
        <c-box as="span" ml="2" color="gray.600" font-size="sm">
          {{ property.reviewCount }} reviews
        </c-box>
      </c-box>
    </c-box>
  </c-box>
</template>

<script>
  export default {
    name: 'Example',
    data () {
      return {
        property: {
          imageUrl: "https://bit.ly/2Z4KKcF",
          imageAlt: "Rear view of modern home with pool",
          beds: 3,
          baths: 2,
          title: "Modern home in city center in the heart of historic Los Angeles",
          formattedPrice: "$1,900.00",
          reviewCount: 34,
          rating: 4,
        }
      }
    }
  }
</script>

as prop#

You can use the as prop to change the element render, like the tag prop on Vue's global dynamic component.

Editable Example 
<c-box as="button" rounded="md" bg="tomato" color="white" px="4" h="8">
  Button
</c-box>

Props#

See all CBox props in the Style Props page

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!