Stack

En stack brukes til å gi lik spacing mellom komponenter.

GitHubEndringslogg

Test props

Eksempler

Standard

Standardverdien er column. Sett elementer i kolonne.

<Stack>
  <Button variant="primary">Primær</Button>
  <Button variant="secondary">Sekundær</Button>
  <Button variant="secondary">Sekundær2</Button>
</Stack>

flexDirection

Sett elementer på kolonne, rekke eller i revers.

<Stack flexDirection="row" gap="md">
  <Button variant="primary">Primær</Button>
  <Button variant="secondary">Sekundær</Button>
  <Button variant="secondary">Sekundær2</Button>
</Stack>

justifyContent

Juster elementer langs hovedaksen.

<Stack flexDirection="row" justifyContent="center">
  <Button variant="primary">Primær</Button>
  <Button variant="secondary">Sekundær</Button>
  <Button variant="secondary">Sekundær2</Button>
</Stack>

alignItems

Juster elementer langs tverraksen.

<Stack alignItems="center" flexDirection="column">
  <Button variant="primary">Primær</Button>
  <Button variant="secondary">Sekundær</Button>
  <Button variant="secondary">Sekundær2</Button>
</Stack>

Retningslinjer

Brukes til å gi lik spacing mellom komponenter.

Kode

<Stack />

import { Stack } from "@aneo-org/design-react/serverComponents";

PropTypeBeskrivelse
flexDirection"row" | "row-reverse" | "column" | "column-reverse"Standardverdi er "row", som er horisontal retning.
gap0 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl"Spacing mellom elementer. Gitt i px, men deles på 16 og gjøres om til rem.