Eksempler

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. I noen tilfeller vil du måtte sette overflow-x: hidden på body for å unngå horisontal scrollbar ved bruk av full-variant.

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