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<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128"> - Description:
- Example:
padding?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
paddingInline?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128"> - Description:
- Example:
paddingBlock?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128"> - Description:
- Example:
margin?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
marginInline?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1918 more ... | "space-128 auto"> - Description:
- Example:
marginBlock?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1918 more ... | "space-128 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<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128"> - Description:
- Example:
top?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
right?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
bottom?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
left?
- Type:
ResponsiveProp<SpacingScale> - 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: