Intro
Box er en layout-komponent som ofte brukes som byggestein for andre komponenter. Den setter padding, border, etc. med design tokens.
Eksempler
'Background'-prop lar deg endre farge basert på tilgjengelige tokens
'padding'-prop lar deg endre padding responsivt basert på brekkpunkt
'paddingInline' gir deg mer kontroll over horisontal padding
'paddingBlock' gir deg mer kontroll over vertikal padding.
'borderWidth' gir deg kontroll over border på Box
'borderColor' lar deg endre border-color på Box basert på tokens
'borderRadius' lar deg endre border-radius på Box basert på tokens. Du kan også enkelt endre border-radius basert på brekkpunkt.
'shadow' lar deg endre box-shadow på Box basert på tokens.
Box lar deg enklere bygge opp kjente grensesnitt gjennom felles tokens og brekkpunkt
Box erstatter dagens Panel-komponent
Retningslinjer
Box tilbyr et utvalgt sett med props og tokens. Målet med Primitives er å løse et problem bra. Vi har ikke tatt med margin, eller andre layout-strategier som øker scopet til komponenten for nå. Box vil ikke alltid være en erstatning for <div> med egen styling.
Tilgjengelighet
Box er ikke en erstatning for semantisk HTML. Bruk `as`-prop aktivt. Støtter OverridableComponent.
Props
Box
as?
- Type:
React.ElementType - Description:
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<"auto" | "visible" | "hidden" | "clip" | "scroll"> - Description:
overflowX?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll"> - Description:
overflowY?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll"> - Description:
flexBasis?
- Type:
ResponsiveProp<string> - Description:
flexShrink?
- Type:
ResponsiveProp<string> - Description:
flexGrow?
- Type:
ResponsiveProp<string> - Description:
gridColumn?
- Type:
ResponsiveProp<string> - Description:
asChild?
- Type:
boolean - Description:
- Example:
background?
- Type:
"bg-default" | "bg-subtle" | "surface-default" | "surface-selected" | "surface-subtle" | "surface-transparent" | "surface-backdrop" | "surface-inverted" | "surface-action-subtle" | ... 28 more ... - Description:
borderColor?
- Type:
"border-default" | "border-strong" | "border-divider" | "border-subtle" | "border-action-selected" | "border-action-hover" | "border-action" | "border-selected" | "border-success" | ... 10 more ... - Description:
borderRadius?
- Type:
ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>> - Description:
- Example:
borderWidth?
- Type:
SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5"> - Description:
- Example:
shadow?
- Type:
"small" | "medium" | "large" | "xlarge" | "xsmall" - Description:
- Example:
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Tokens
Tokens brukt internt i Box bør ikke overskrives.