Skip to content

Latest commit

 

History

History
141 lines (113 loc) · 4.6 KB

stack.md

File metadata and controls

141 lines (113 loc) · 4.6 KB
title description version
Stack
Stack Component
2.0+

Stack

Stack is a layout utility component that makes it easy to stack elements together and apply a space between them. It composes the CFlex component.

Import

By default, each item is stacked vertically. CStack clones its children and passes the spacing to them using margin-bottom or margin-right.

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

In addition, Chakra-UI Vue exports two additional CStack components

  • CVStack: used to stack elements in the vertical direction
  • CHStack: used to stack elements in the horizontal direction
import { CStack, CHStack, CVStack } from '@chakra-ui/vue-next';

Usage

::showcase ::basic-stack :: ::

<CStack :spacing="5">
  <CBox :p="5" shadow="md" border-width="1px">
    <CHeading>See the Vue</CHeading>
    <CText :mt="4">Vue makes front-end development a breeze.</CText>
  </CBox>
  <CBox :p="5" shadow="md" border-width="1px">
    <CHeading>Go Nuxt!</CHeading>
    <CText :mt="4">Nuxt makes writing Vue even easier.</CText>
  </CBox>
</CStack>

Stack items horizontally

You can stack the items horizontally either:

  • By passing the is-inline prop or direction and set it to row to the CStack component.

::showcase ::horizontal-stack :: ::

<CStack :spacing="5" is-inline>
  <CBox :p="5" shadow="md" border-width="1px">
    <CHeading>See the Vue</CHeading>
    <CText :mt="4">Vue makes front-end development a breeze.</CText>
  </CBox>
  <CBox :p="5" shadow="md" border-width="1px">
    <CHeading>Go Nuxt!</CHeading>
    <CText :mt="4">Nuxt makes writing Vue even easier.</CText>
  </CBox>
</CStack>
  • Using the CHStack component.

::showcase ::horizontal-stack-two :: ::

<CHStack :spacing="5">
  <CBox :p="5" shadow="md" border-width="1px">
    <CHeading>See the Vue</CHeading>
    <CText :mt="4">Vue makes front-end development a breeze.</CText>
  </CBox>
  <CBox :p="5" shadow="md" border-width="1px">
    <CHeading>Go Nuxt!</CHeading>
    <CText :mt="4">Nuxt makes writing Vue even easier.</CText>
  </CBox>
</CHStack>

Optionally, you can use align and justify to adjust the alignment and distribution of the items.

Reverse display order of items

Set direction to row-reverse or column-reverse.

::showcase ::reverse-stack :: ::

<CStack :spacing="5" is-reversed>
  <CBox :p="5" shadow="md" border-width="1px">
    <CHeading>See the Vue</CHeading>
    <CText :mt="4">Vue makes front-end development a breeze.</CText>
  </CBox>
  <CBox :p="5" shadow="md" border-width="1px">
    <CHeading>Go Nuxt!</CHeading>
    <CText :mt="4">Nuxt makes writing Vue even easier.</CText>
  </CBox>
</CStack>

Stacking HTML elements

::showcase ::html-stack :: ::

<CStack :spacing="4">
  <CText>Chakra component 1</CText>
  <p>HTML paragraph element</p>
  <h3>HTML heading element</h3>
  <CText>Chakra component 2</CText>
</CStack>

Props

Name Type Default Description
isInline boolean false If true the items will be stacked horizontally.
direction FlexProps["flexDirection"] The direction to stack the items.
spacing StyledSystem.MarginProps The space between each stack item
align FlexProps["alignItems"] The alignment of the stack item. Similar to align-items
justify FlexProps["justifyContent"] The distribution of the stack item. Similar to justify-content
shouldWrapChildren boolean false If true, the children will be wrapped in a Box with display: inline-block, and the Box will take the spacing props
divider boolean false If true, the stack items will be divided by a straight line