Intro
HStack er en layout-komponent for å horisontalt gruppere elementer sammen med riktig spacing.
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:
asChild?
- Type:
boolean
- Description:
- Example:
className?
- Type:
string
padding?
- 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:
paddingInline?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 435 more ... | "32 32">
- Description:
- Example:
paddingBlock?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 435 more ... | "32 32">
- Description:
- Example:
margin?
- 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:
marginInline?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 478 more ... | "32 auto">
- Description:
- Example:
marginBlock?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 478 more ... | "32 auto">
- Description:
- Example:
width?
- Type:
ResponsiveProp<string>
- Description:
minWidth?
- Type:
ResponsiveProp<string>
- Description:
maxWidth?
- Type:
ResponsiveProp<string>
- Description:
height?
- Type:
ResponsiveProp<string>
- Description:
minHeight?
- Type:
ResponsiveProp<string>
- Description:
maxHeight?
- Type:
ResponsiveProp<string>
- Description:
position?
- Type:
ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky">
- Description:
inset?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 435 more ... | "32 32">
- Description:
- Example:
top?
- 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:
right?
- 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:
bottom?
- 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:
left?
- 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:
overflow?
- Type:
ResponsiveProp<"hidden" | "auto" | "visible" | "clip" | "scroll">
- Description:
overflowX?
- Type:
ResponsiveProp<"hidden" | "auto" | "visible" | "clip" | "scroll">
- Description:
overflowY?
- Type:
ResponsiveProp<"hidden" | "auto" | "visible" | "clip" | "scroll">
- Description:
flexBasis?
- Type:
ResponsiveProp<string>
- Description:
flexShrink?
- Type:
ResponsiveProp<string>
- Description:
flexGrow?
- Type:
ResponsiveProp<string>
- Description:
gridColumn?
- Type:
ResponsiveProp<string>
- Description:
justify?
- Type:
ResponsiveProp<"start" | "center" | "end" | "space-around" | "space-between" | "space-evenly">
- Description:
- Example:
align?
- Type:
ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">
- Default:"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" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 435 more ... | "32 32">
- Description:
- Example:
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description: