var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),k=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},r=(t,e,o,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of u(e))!x.call(t,a)&&a!==o&&i(t,a,{get:()=>e[a],enumerable:!(c=p(e,a))||c.enumerable});return t};var w=(t,e,o)=>(o=t!=null?h(m(t)):{},r(e||!t||!t.__esModule?i(o,"default",{value:t,enumerable:!0}):o,t)),S=t=>r(i({},"__esModule",{value:!0}),t);var s=g((j,d)=>{d.exports=_jsx_runtime});var v={};k(v,{default:()=>f,frontmatter:()=>y});var n=w(s()),y={id:"stack",category:"layout",title:"Stack",package:"@chakra-ui/layout",description:"Stack is a layout component used to group elements together and apply a space between them.",video:"https://youtu.be/6Az4Yd6f8RA"};function l(t){let e=Object.assign({h2:"h2",pre:"pre",code:"code",ul:"ul",li:"li",p:"p",a:"a",h3:"h3",h4:"h4",strong:"strong"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Stack, HStack, VStack } from '@chakra-ui/react' `})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"VStack: used to stack elements in the vertical direction"}),` `,(0,n.jsx)(e.li,{children:"HStack: used to stack elements in the horizontal direction"}),` `,(0,n.jsx)(e.li,{children:"Stack: used to stack elements in the vertical or horizontal direction"}),` `]}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsxs)(e.p,{children:[`Stack uses a modified version of the `,(0,n.jsx)(e.a,{href:"https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/",children:"CSS lobotomized owl selector"}),` to add spacing between its children.`]}),` `,(0,n.jsxs)(e.p,{children:["To stack elements in horizontal or vertical direction only, use the ",(0,n.jsx)(e.code,{children:"HStack"}),` or `,(0,n.jsx)(e.code,{children:"VStack"})," components. You can also use the ",(0,n.jsx)(e.code,{children:"Stack"}),` component as well and pass the `,(0,n.jsx)(e.code,{children:"direction"})," prop."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` 1 2 3 `})}),` `,(0,n.jsx)(e.h3,{id:"responsive-direction",children:"Responsive direction"}),` `,(0,n.jsxs)(e.p,{children:["You can pass responsive values to the ",(0,n.jsx)(e.code,{children:"Stack"}),` component to change stack direction and/or spacing between elements.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` 1 2 3 `})}),` `,(0,n.jsx)(e.h3,{id:"stack-dividers",children:"Stack Dividers"}),` `,(0,n.jsxs)(e.p,{children:[`In some scenarios, you may want to add dividers between stacked elements. Pass the `,(0,n.jsx)(e.code,{children:"divider"})," prop and set its value to the ",(0,n.jsx)(e.code,{children:"StackDivider"}),` or any custom React element.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`} gap={4} align='stretch' > 1 2 3 `})}),` `,(0,n.jsx)(e.h3,{id:"stack-items-horizontally",children:"Stack items horizontally"}),` `,(0,n.jsxs)(e.p,{children:["Pass the ",(0,n.jsx)(e.code,{children:"direction"})," and set it to ",(0,n.jsx)(e.code,{children:"row"}),". Optionally, you can use ",(0,n.jsx)(e.code,{children:"align"}),` and `,(0,n.jsx)(e.code,{children:"justify"})," to adjust the alignment and distribution of the items."]}),` `,(0,n.jsx)(e.h4,{id:"feature-cards-with-stack-component",children:"Feature Cards with Stack Component"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",manual:"true",children:`function Feature({ title, desc, ...rest }) { return ( {title} {desc} ) } function StackEx() { return ( ) } render() `})}),` `,(0,n.jsx)(e.h4,{id:"feature-cards-with-hstack-component",children:"Feature Cards with HStack Component"}),` `,(0,n.jsxs)(e.p,{children:["In the example following, we can notice that for the ",(0,n.jsx)(e.code,{children:"HStack"}),` component, we don't need the direction props, since this component is specifically for horizontally stacking items.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",manual:"true",children:`function Feature({ title, desc, ...rest }) { return ( {title} {desc} ) } function StackEx() { return ( ) } render() `})}),` `,(0,n.jsx)(e.h3,{id:"notes-on-stack-vs-flex",children:"Notes on Stack vs Flex"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"Stack"})," component and the ",(0,n.jsx)(e.code,{children:"Flex"}),` component have their children spaced out evenly but the `,(0,n.jsx)(e.strong,{children:"key"})," difference is that the ",(0,n.jsx)(e.code,{children:"Stack"}),` won't span the entire width of the container whereas the `,(0,n.jsx)(e.code,{children:"Flex"}),` will. Another thing to note is that the items in both `,(0,n.jsx)(e.code,{children:"Stack"})," and ",(0,n.jsx)(e.code,{children:"Flex"})," are aligned in the center by default."]})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var f=b;return S(v);})(); ;return Component;

Stack

Props#

Props#