Stack

Stack displays a container that groups elements together and puts space around them.

Import

import { Stack } from "@prismane/core";

Usage

<Stack>
  <Flex h={fr(10)} w="100%" bg="ruby">
    1
  </Flex>
  <Flex h={fr(10)} w="100%" bg="lime">
    2
  </Flex>
  <Flex h={fr(10)} w="100%" bg="teal">
    3
  </Flex>
</Stack>

Stack Directions

<Flex direction="column" gap={fr(5)} w="100%">
  <Text cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}>
    Column:
  </Text>
  <Stack mb={fr(5)}>
    <Flex w="100%" h={fr(10)} bg="ruby">
      1
    </Flex>
    <Flex w="100%" h={fr(10)} bg="lime">
      2
    </Flex>
    <Flex w="100%" h={fr(10)} bg="teal">
      3
    </Flex>
  </Stack>
  <Text cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}>
    Row:
  </Text>
  <Stack mb={fr(5)} direction="row">
    <Flex w="100%" h={fr(10)} bg="ruby">
      1
    </Flex>
    <Flex w="100%" h={fr(10)} bg="lime">
      2
    </Flex>
    <Flex w="100%" h={fr(10)} bg="teal">
      3
    </Flex>
  </Stack>
  <Text cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}>
    Row Reverse:
  </Text>
  <Stack mb={fr(5)} direction="row-reverse">
    <Flex w="100%" h={fr(10)} bg="ruby">
      1
    </Flex>
    <Flex w="100%" h={fr(10)} bg="lime">
      2
    </Flex>
    <Flex w="100%" h={fr(10)} bg="teal">
      3
    </Flex>
  </Stack>
  <Text cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}>
    Column Reverse:
  </Text>
  <Stack mb={fr(5)} direction="column-reverse">
    <Flex w="100%" h={fr(10)} bg="ruby">
      1
    </Flex>
    <Flex w="100%" h={fr(10)} bg="lime">
      2
    </Flex>
    <Flex w="100%" h={fr(10)} bg="teal">
      3
    </Flex>
  </Stack>
</Flex>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Stack

Go BackSquare

Up NextSwitch