Stack

Stack is a container-type utility which abstracts layout implementation for its children components.

• direction refers to the stacking of children in either horizontal or vertical orientation.
• gap refers to the space between children components.
• sm, md, lg, xl are responsive properties which can be used to supply custom direction & gap for respective breakpoints.

<Box className="spr-ui-03 spr-text-01 p-4">Block 1</Box>
<Box className="spr-ui-03 spr-text-01 p-4">Block 2</Box>
<Box className="spr-ui-03 spr-text-01 p-4">Block 3</Box>

import * as React from "react";
import { Stack } from "spaceweb/stack";

export default () => {
  return (
    <Stack direction="vertical" gap={4}>
      <Box className="spr-ui-03 spr-text-01 p-4">
        Block 1
      </Box>
      <Box className="spr-ui-03 spr-text-01 p-4">
        Block 2
      </Box>
      <Box className="spr-ui-03 spr-text-01 p-4">
        Block 3
      </Box>
    </Stack>
  );
}

Responsive Stack

{ direction : "vertical", gap : 8}

{ direction : "horizontal", gap : 2}

{ direction : "vertical", gap : 8}

<Box className="spr-ui-03 spr-text-01 p-4">Block 1</Box>
<Box className="spr-ui-03 spr-text-01 p-4">Block 2</Box>
<Box className="spr-ui-03 spr-text-01 p-4">Block 3</Box>

import * as React from "react";
import { Stack } from "spaceweb/stack";

export default () => {
  return (
    <Stack
      sm={{ direction: "vertical", gap: 8 }}
      md={{ direction: "horizontal", gap: 2 }}
      xl={{ direction: "vertical", gap: 8 }}
    >
      <Box className="spr-ui-03 spr-text-01 p-4">
        Block 1
      </Box>
      <Box className="spr-ui-03 spr-text-01 p-4">
        Block 2
      </Box>
      <Box className="spr-ui-03 spr-text-01 p-4">
        Block 3
      </Box>
    </Stack>
  );
}

Examples

• Reduce viewport size below md to see the stack direction change.
• Responsive Stack can be achieved using breakpoints in props of Stack.
• Provide direction & gap for every breakpoint you want to use.

• shrink attribute on stack makes container take height of its items in vertical stack.

• You can wrap any child with StackItem to provide custom shrink property to specific item.

• You can use className to provide align property to container to align all items

• You can wrap any child with StackItem & provide custom alignment using className on it.

• shrink attribute on stack makes container take width of its items in horizontal stack.

• You can wrap any child with StackItem to provide custom shrink property to specific item.

• You can use className to provide align property to container to align all items

• You can wrap any child with StackItem & provide custom alignment using className on it.