Intro
Box er en grunnleggende layout primitive for innkapsling og enkel styling. Komponenten er erstatter for eldre Panel-komponent med et rikere sett av features og responsivitet.
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? React.ElementType
- OverridableComponent-api
- background? BackgroundToken
- Background color. Accepts a color token.
- borderColor? "border-default" | "border-strong" | "border-divider" | "border-subtle" | "border-action-selected" | "border-action" | "border-selected" | "border-success" | "border-danger" | ... 9 more ...
- Border color. Accepts a color token.
- borderRadius? ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>
- Border radius. Accepts a radius token, or an object of radius tokens for different breakpoints. @example borderRadius='full' borderRadius='0 full large small' borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
- borderWidth? SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">
- Border-width. If this is not set there will be no border. @example borderWidth='2' borderWidth='1 2 3 4'
- padding? ResponsiveProp<SpacingScale>
- Spacing around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. @example padding='4' padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
- paddingInline? ResponsiveProp<"0 0" | "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" | "3 1" | "3 2" | "3 3" | "3 4" | ... 377 more ... | "32 32">
- Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. @example paddingInline='4' paddingInline='4 5' paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
- paddingBlock? ResponsiveProp<"0 0" | "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" | "3 1" | "3 2" | "3 3" | "3 4" | ... 377 more ... | "32 32">
- Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. @example paddingBlock='4' paddingBlock='4 5' paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
- shadow? "small" | "medium" | "large" | "xlarge" | "xsmall"
- Shadow on box. Accepts a shadow token. @example shadow='small'
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Box extends HTMLDivElement
Tokens
Tokens brukt internt i Box bør ikke overskrives.