Intro
VStack er en layout-komponent for å vertikalt gruppere elementer sammen med riktig spacing.
Egnet til:
- Gruppering av skjema-elementer
Uegnet til:
- Oppbygging av større side-layout
Eksempler
VStack er en enkel layout-komponent for flexbox med flex-direction: column.
Endrer 'align-items'.
Endrer 'justify-content'.
Med responsive gap kan man redusere/øke mellomrom basert på brekkpunktene våre
Varianter
Gap
For spacing bruker vi et nytt api ResponsiveProp
. Dette lar deg sette en statisk verdi basert på tokens fra Aksel, eller verdier som bare brukes på spesifikke brekkpunkt.
Props
VStack
as?
- Type:
React.ElementType
- Description:
justify?
- Type:
ResponsiveProp<"start" | "center" | "end" | "space-around" | "space-between" | "space-evenly">
- Description:
- Example:
align?
- Type:
ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">
- Description:
- Example:
gap?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description: