Intro
Enkel primitiv for å legge til negativ margin som lar innhold gli utover parent sin container.
Egnet til:
- Ignorere padding fra parent-element
- 1px optisk alignment
Uegnet til:
- Større layout-endringer, bør ikke brukes som alternativ til gode layout
- Bryte konsistens og visuel utforming for NAV og Aksel
Eksempler
Margin block/inline er begge reponsive, som lar deg endre negativ margin dynamiskt basert på brekkpunkter.
Full lar Bleed bryte ut av parent og dekke hele skjermbredden. Dette kan være nyttig for 'Heroes' eller lignende elementer som ønsker å bryte ut av parent-layout
Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Bleed + child-komponent skal fungere må child kunne ta inn 'className' og 'style' som prop.
Noen ganger er det den ene pixelen som skal til for å optisk sentrere elementer.
Varianter
Margin
Bleed legger til negativ margin gjennom bruk av marginBlock eller marginInline-prop. Disse følger tokens for spacing, men har i tillegg 2 ekstra muligheter full og px.
Full
Bruker teknikken calc((100vw - 100%)/-2) for å strekke seg helt ut i kanten av siden.
Px
Er lagt til som en enkel metode å optisk justere elementer, noe du kan lese mer om fra Slava Shestopalov.
Reflective padding
Lar deg legge på negativ margin, men erstatter også den med padding i samme slengen. Dette kan være nyttig i tilfeller der du ønsker at bakgrunnen til elementet skal gå helt ut i kantene, men innholdet skal forbli der det var før du la på Bleed.
As child
Når satt, vil rendre Bleed som nærmeste child-element. Dette merger klasser, stiler og event-handlers.
I tilfellene der man bruker asChild må også child-elementet akseptere + sette className og style. Dette blir håndtert automatisk hvis child er en Aksel-komponent.
Props
Bleed
- marginInline? ResponsiveProp<BleedSpacingInline | "0 0" | "0 full" | "0 px" | "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" | ... 512 more ... | "32 32">
- **Negative** horizontal margin around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. @example marginInline='4' marginInline='4 5' marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
- marginBlock? ResponsiveProp<"0 0" | "0 px" | "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" | "0 18" | "0 20" | "0 24" | ... 463 more ... | BleedSpacingBlock>
- **Negative** vertical margin around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. @example marginBlock='4' marginBlock='4 5' marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
- reflectivePadding? boolean
- When true, set the padding to mirror the margin. This maintains the apparent width of the element prior to adding Bleed. When this is used with `asChild`, it will overwrite the padding of the child.
- asChild? boolean
- When true, the Bleed will render as its child. This merges classes, styles and event handlers.
- 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
- Bleed extends HTMLDivElement