Intro
HStack er en layout-komponent for å horisontalt gruppere elementer sammen med riktig spacing.
Egnet til:
- Gruppering av skjema-elementer
- Gruppering av Tags
- Gruppering av Cards
Uegnet til:
- Oppbygging av større side-layout
Eksempler
HStack er en enkel layout-komponent for flexbox.
Som standard er 'wrap' satt til 'true'.
Endrer 'align-items'.
Endrer 'justify-content'.
Med responsive gap kan man redusere/øke mellomrom basert på brekkpunktene våre. Implementasjonen er mobile-first, slik at man 'sm: 8' vil sette gap for 'md', 'lg' og 'xl' også.
Ønsker du å endre fra 'row' til 'column' ved et brekkpunkt kan du bruke 'Stack'-komponenten. Husk å også oppdatere 'align' og 'justify' samtidig.
Spacer lar deg lett legge inn automatisk stretch mellom elementer. Dette kan komme inn nyttig når man f.eks skal plassere knapper i 'InternalHeader'.
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
HStack
- 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
- wrap? boolean
- flex-wrap
- 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
- HStack extends HTMLDivElement