Stack

Stack

Storybook

Stack ordnar element vertikalt eller horisontellt med avstånd mellan dem.

Använd Stack för endimensionell layout, där elementen ligger efter varandra i en rad eller en kolumn. Ska innehållet placeras i både rader och kolumner, använd Grid.

import { Stack } from '@midas-ds/components'

<Stack>
  <div>Första</div>
  <div>Andra</div>
  <div>Tredje</div>
</Stack>

Första

Andra

Tredje

Avstånd

Använd spacing för att styra avståndet mellan elementen. Värdena motsvarar Midas semantiska space-tokens. Standard är small.

Värde	Storlek
xsmall	0.25rem (4px)
small (standard)	0.5rem (8px)
medium	1rem (16px)
large	1.5rem (24px)
xlarge	2rem (32px)

<Stack spacing='large'>…</Stack>

Första

Andra

Tredje

Horisontell

Som standard ligger elementen under varandra. Använd direction='row' för att lägga dem bredvid varandra.

<Stack direction='row'>…</Stack>

Första

Andra

Tredje

API

Name	Type	Default	Description
elementType	StackElementType	div	The HTML element to render, e.g. ul for a list of items
direction	"column" | "column-reverse" | "row" | "row-reverse"	column
spacing	StackSpacing	small	Space between the items, from the Midas semantic space tokens
alignItems	"baseline" | "center" | "end" | "start" | "stretch"	stretch	How the items line up across the direction: horizontally in a column, vertically in a row. stretch makes them as wide as the Stack in a column and as tall as it in a row
justifyContent	"around" | "between" | "center" | "end" | "evenly" | "start"	start	How the items are placed along the direction: vertically in a column, horizontally in a row. between puts the first and last item at the edges, around gives each item equal space on both sides and evenly makes every gap the same, edges included
wrap	boolean	false	Let the items wrap onto several lines