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? React.ElementType
- OverridableComponent-api
- justify? "start" | "center" | "end" | "space-around" | "space-between" | "space-evenly"
- Justify-content
- align? "start" | "center" | "end" | "baseline" | "stretch"
- Align-items
- gap? ResponsiveProp<SpacingScale>
- @example gap='4' gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- VStack extends HTMLDivElement