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