Intro
Bleed er en av våre layout primitives. Komponenten er en enkel primitiv for å legge til negativ margin som lar innhold gli utover parent sin container.
Eksempler
Margin block/inline er begge reponsive, som lar deg endre negativ margin dynamiskt basert på brekkpunkter.
I noen tilfeller må du også sette 'overflow-x: hidden;' på body for å unngå horisontal scrollbar. 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. 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
Bleed
marginInline?
- Type:
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">
- Description:
- Example:
marginBlock?
- Type:
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>
- Description:
- Example:
reflectivePadding?
- Type:
boolean
- Description:
asChild?
- Type:
boolean
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description: