Style Props

<template>
  <!-- m="2" refers to the value of theme.space.[2] -->
  <c-box m="2">Tomato</c-box>
  
  <!-- You can also make use of custom values -->
  <c-box max-w="960px" mx="auto">Custom</c-box>

  <!-- sets margin `8px` on all viewports and `12px` from the first breakpoint and up -->
  <c-box :m="['2', '3']" />
</template>

<template>
  <!-- picks up a nested color value using dot notation -->
  <c-box color="gray.50" />
  <!-- You can also use raw CSS color values -->
  <c-box color="#f00" />
  <!-- Sets background color to pink -->
  <c-box bg="pink" />
</template>

<template>
  <!-- font-size of `theme.fontSizes.md` -->
  <c-text fontSize="md" />
  <!-- font-size `32px` -->
  <c-text fontSize="32" />
  <!-- font-size `'2em'` -->
  <c-text fontSize="2em" />
  <!-- text-align `left` on all viewports and `center` from the first breakpoint and up -->
  <c-text :textAlign="[ 'left', 'center' ]" />
</template>

<template>
  <!-- verbose -->
  <c-box width="100%" height="32px" />
  <!-- shorthand -->
  <c-box w="100%" h="32px" />
  <!-- width `256px` -->
  <c-box w="256" />
  <!-- width `40px` -->
  <c-box w="40px" />
</template>

<template>
  <!-- verbose -->
  <c-box display="flex" align-items="center" justify-content="space-between">
    Box with Flex props
  </c-box>
  
  <!-- shorthand using the `Flex` component -->
  <c-flex align="center" justify="center">
    Flex Container
  </c-flex>
</template>

<script>
import { CBox, CFlex } from '@chakra-ui/vue'

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

<template>
  <!-- verbose -->
  <c-box display="grid" gridGap="2" gridAutoFlow="row dense">
    Grid
  </c-box>

  <!-- shorthand using the `Grid` component -->
  <c-grid gap="2" auto-flow="row dense">
    Grid
  </c-grid>
</template>
<script>
import { CBox, CGrid } from '@chakra-ui/vue'

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

<template>
  <!-- verbose -->
  <c-box
    backgroundImage="url('/images/kyuubi.png')"
    backgroundPosition="center"
    backgroundRepeat="no-repeat"
  >

  <!-- shorthand -->
  <c-box bgImage="url('/images/gaara.png')" bgPos="center" bgRepeat="no-repeat" >
</template>

<script>
import { CCBox } from '@chakra-ui/vue'\n

export default {
  components: {
    CBox
  }
}
</script>

<template>
  <c-box border="1px" borderRadius="md" borderColor="gray.200">
    Card
  </c-box>
</template>

<script>
import { CBox } from '@chakra-ui/vue'

export default {
  components: {
    CBox
  }
}
</script>

<template>
  <!-- This button will have no right borderRadius -->
  <c-button roundedRight="0">Button 1</c-button>

  <!-- This button will have no left borderRadius*/ -->
  <c-button roundedLeft="0">Button 2</c-button>

  <!-- top left and top right radius will be `theme.radii.md` => 4px -->
  <c-button roundedTop="md">Button 2</c-button>
</template>

<script>
import { CButton } from '@chakra-ui/vue'

export default {
  components: {
    CButton
  }
}
</script>

<template>

  <!-- verbose -->
  <c-box position="absolute">Cover</c-box>

  <!-- shorthand -->
  <c-box pos="absolute">Cover</c-box>

  <c-box pos="absolute" top="0" left="0">
    Absolute with top and left
  </c-box>

  <c-box pos="fixed" w="100%" zIndex="2">
    Fixed with zIndex
  </c-box>
</template>

<script>
import { CBox } from '@chakra-ui/vue'

export default {
  components: {
    CBox
  }
}
</script>

<template>
  <!-- verbose -->
  <!-- text-shadow will be `theme.shadows.sm` -->
  <!-- box-shadow will be `theme.shadows.md` -->
  <c-box textShadow="sm" boxShadow="md" />

  <!-- raw CSS values -->
  <c-text textShadow="2px 2px #ff0000" boxShadow="5px 10px #888888">
    Text with shadows
  </c-text>
</template>

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

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

<template>
  <c-button as="router-link" to="/about">About Page Button</c-button>
</template>