Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Stack

Stacks are used to give their children equal spacing between them.

Code examples

<Stack>
  <Text>Her er et avsnitt</Text>
  <Text>Her er et avsnitt til</Text>
  <Text>Her er enda et avsnitt</Text>
</Stack>

Guidelines

Spacing

You can choose the distance applied between each element using the spacing prop. The numbers you provide here follow the spacing scale, where 1 = 6px.

Tips og Triks

The Stack component works by applying a margin prop to all of its children. This means that every child must be able to accept a margin prop, typically because they are other Spor components.

Spacing is applied to each direct child passed to the Stack. For example, if you wrap two elements inside a Box component, the margin will be applied to the outer Box component rather than the elements inside it.

Direction

You can determine the direction in which things are presented using the flexDirection prop. The default is top to bottom, but you can change this as you like—by passing "row", "column", or even "row-reverse" and "column-reverse".

Code

<Stack />

import { Stack } from "@vygruppen/spor-react";

Useful for spacing out items evenly

Props

Name
Type
Required?
Description
gapnumberDefault 1.5 (8px)
flexDirection"column" | "row" | "column-reverse" | "row-reverse"Default "column"
childrenReact.ReactNodeThe items to space out evenly