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?
- 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:
wrap?
- Type:
boolean
- Description:
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: