Intro
HStack er en av våre layout primitives. Den brukes til å horisontalt gruppere elementer sammen med lik avstand. Dette er en wrapper for display:flex og flex-direction:row.
Eksempler
HStack er en enkel layout-komponent for flexbox.
Som standard er 'wrap' satt til 'true'.
Endrer 'align-items'.
Endrer 'justify-content'.
På noen props, feks. gap, kan du sette ulike verdier per brekkpunkt. Implementasjonen er mobile-first, slik at 'sm: 8' vil også gjelde for 'md', 'lg' og 'xl'.
Ø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 være nyttig når man f.eks. skal plassere knapper i 'InternalHeader'.
Props
HStack
as?
- Type:
React.ElementType - Description:
asChild?
- Type:
boolean - Description:
- Example:
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:
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:
ref?
- Type:
LegacyRef<HTMLDivElement> - Description: