stack.mdx

import SEO from '../components/SEO'

Stack

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

Import

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

By default, each item is stacked vertically. Stack clones it's children and passes the spacing to them using margin-bottom or margin-right.

Usage

<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 makes front-end development a breeze.</c-text>
    </c-box>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>Go Nuxt!</c-heading>
        <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
    </c-box>
</c-stack>

Stack items horizontally

To stack CStack children horizontally, pass the isInline prop or direction and set it to row.

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

<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 makes front-end development a breeze.</c-text>
    </c-box>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>Go Nuxt!</c-heading>
        <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
    </c-box>
</c-stack>

Reverse display order of items

Pass the isReversed prop or set direction to row-reverse or column-reverse.

<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 makes front-end development a breeze.</c-text>
    </c-box>
      <c-box :p="5" shadow="md" border-width="1px">
        <c-heading>Go Nuxt!</c-heading>
        <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
    </c-box>
</c-stack>

Props

Name	Type	Default	Description
isInline	boolean	false	If true the items will be stacked horizontally.
isReversed	boolean	false	If true the items will be displayed in reverse order.
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		If true, the children will be wrapped in a Box with display: inline-block, and the Box will take the spacing props

Slots

Name	Description
default	The content of the stack