Intro
Box er en layout-komponent som ofte brukes som byggestein for andre komponenter. Den setter padding, border, etc. med design tokens.
Egnet til:
- Enkle statiske containers med begrenset styling
- Wrapper for mer komplekse komponenter
Uegnet til:
- Avanserte layout-justeringer
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:
background?
- Type:
BackgroundToken
- 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:
padding?
- Type:
ResponsiveProp<"0" | "1" | "2" | "3" | "4" | "5" | "05" | "1-alt" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
paddingInline?
- Type:
ResponsiveProp<"0" | "0 0" | "1" | "2" | "3" | "4" | "5" | "0 1" | "0 2" | "0 3" | "0 4" | "0 5" | "1 0" | "1 1" | "1 2" | "1 3" | "1 4" | "1 5" | "2 0" | "2 1" | "2 2" | "2 3" | "2 4" | "2 5" | "3 0" | ... 436 more ... | "32 32">
- Description:
- Example:
paddingBlock?
- Type:
ResponsiveProp<"0" | "0 0" | "1" | "2" | "3" | "4" | "5" | "0 1" | "0 2" | "0 3" | "0 4" | "0 5" | "1 0" | "1 1" | "1 2" | "1 3" | "1 4" | "1 5" | "2 0" | "2 1" | "2 2" | "2 3" | "2 4" | "2 5" | "3 0" | ... 436 more ... | "32 32">
- Description:
- Example:
shadow?
- Type:
"small" | "medium" | "large" | "xlarge" | "xsmall"
- Description:
- Example:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Tokens
Tokens brukt internt i Box bør ikke overskrives.