Skip to content
Vy logo
  • Spor
  • Resources
Components

Stack

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

Examples

A simple stack

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

A stack with custom spacing

<Stack gap="2">
  <Text>Her er et avsnitt</Text>
  <Text>Her er et avsnitt til</Text>
  <Text>Her er enda et avsnitt</Text>
</Stack>

A horizontal stack

<Stack flexDirection="row">
  <Button variant="tertiary">Avbryt</Button>
  <Button variant="primary">Kjøp</Button>
</Stack>

A reverse sideways stack

<Stack flexDirection="row-reverse">
  <Button variant="tertiary">Avbryt</Button>
  <Button variant="primary">Kjøp</Button>
</Stack>

Guidelines

The Stack component is useful when you want a set of components to have the same amount of space between them.

<Stack>
  <Text>Her er et avsnitt</Text>
  <Text>Her er et avsnitt til</Text>
  <Text>Her er et tredje avsnitt også</Text>
</Stack>

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.

<Stack spacing={4}>
  <Text>Her er et avsnitt</Text>
  <Text>Her er et avsnitt til</Text>
  <Text>Her er et tredje avsnitt også</Text>
</Stack>

Tips og Triks

Stack-komponenten fungerer ved å legge på en `margin`-prop til alle barna. Det krever altså at alle barna må kunne ta imot en `margin` prop – typisk ved at de er andre Spor-komponenter selv.

Avstanden vil også bli gitt til hvert direkte children som sendes inn, så wrapper du to elementer i en Box, for eksempel, er det den ytterste Box-komponenten som får marginen på seg.

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".

<Stack spacing={4} flexDirection="row">
  <Card padding={2} colorScheme="teal">Nummer 1</Card>
  <Card padding={2} colorScheme="green">Nummer 2</Card>
  <Card padding={2} colorScheme="yellow">Nummer 3</Card>
  <Card padding={2} colorScheme="orange">Nummer 4</Card>
</Stack>

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