Skip to main content

<Stack />

<Stack /> is a component used to group elements together.

Example​

 open Ancestor

@react.component
let make = () => {
  <Box display=[xs(#flex)] justifyContent=[xs(#center)]>
    <Box maxW=[md(300->#px)] width=[xs(100.0->#pct)]>
      <Stack spacing=[xs(2)] direction=[xs(#horizontal), md(#vertical)]>
        <Placeholder width=[xs(100.0->#pct)]> {"Item"->React.string} </Placeholder>
        <Placeholder width=[xs(100.0->#pct)]> {"Item"->React.string} </Placeholder>
        <Placeholder width=[xs(100.0->#pct)]> {"Item"->React.string} </Placeholder>
      </Stack>
    </Box>
  </Box>
}
info

Resize your browser to see the responsive styles in action.

Item
Item
Item

Using dividers​

 open Ancestor

module Divider = {
  @react.component
  let make = () => <Box height=[xs(2->#px)] bgColor=[xs(#hex("#cecece"))] />
}

@react.component
let make = () => {
  <Box display=[xs(#flex)] justifyContent=[xs(#center)]>
    <Box maxW=[md(300->#px)] width=[xs(100.0->#pct)]>
      <Stack spacing=[xs(3)] divider={<Divider />}>
        <Placeholder width=[xs(100.0->#pct)]> {"Item"->React.string} </Placeholder>
        <Placeholder width=[xs(100.0->#pct)]> {"Item"->React.string} </Placeholder>
        <Placeholder width=[xs(100.0->#pct)]> {"Item"->React.string} </Placeholder>
      </Stack>
    </Box>
  </Box>
}
Item
Item
Item

Props​

<Stack /> accepts all props defined by the system props. Furthermore, it also accepts the following properties:

spacing​

  • Type: responsiveProp<Config.spacing>
  • Optional: True

direction​

  • Type: responsiveProp<[ #vertical | #horizontal ]>
  • Optional: True

divider​

  • Type: React.element
  • Optional: True
info

The responsiveProp is a customizable type defined in the Ancestor's setup. You can see the default breakpoints defined in the Ancestor's default setup or define your own breakpoints.