Guides
Components
Stacks are used to give their children equal spacing between them.
<Stack> <Text>Her er et avsnitt</Text> <Text>Her er et avsnitt til</Text> <Text>Her er enda et avsnitt</Text> </Stack>
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-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.
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 />import { Stack } from "@vygruppen/spor-react";
Useful for spacing out items evenly
Name | Type | Required? | Description |
|---|---|---|---|
gap | number | Default 1.5 (8px) | |
flexDirection | "column" | "row" | "column-reverse" | "row-reverse" | Default "column" | |
children | React.ReactNode | The items to space out evenly |