shadow
Komponent Masonry vytvára responzívne "Masonry" rozvrhnutie podriadených prvkov, ktoré sú dynamicky usporiadané do stĺpcov na základe zadaných atribútov. Podporuje prispôsobenie počtu stĺpcov, maximálnej šírky stĺpcov, medzery medzi prvkami a debouncing na optimalizáciu výkonu.
Použitím atribútu max-col-width obmedzíte šírku stĺpcov na zadanú hodnotu.
Použitím atribútu gap určíte šírku medzery medzi stĺpcami v pixeloch.
Použite wje-masonry na skladanie stabilného rozloženia stránky s jasnou hierarchiou obsahu.
Nepoužívajte ho na riešenie biznis logiky ani na stavovú orchestráciu komponentov.
Zachovajte semantiku dokumentu (header, main, aside, footer) a logické poradie fokusovateľných prvkov.
Odporúčané postupy
- Najprv definujte desktop/mobile breakpoints a až potom dolaďujte detaily.
- Preferujte konzistentné spacing tokeny pred ad-hoc margin/padding hodnotami.
- Pri layoutoch s overflow vždy otestujte klávesnicovú navigáciu a čítačky.
| Popis | Nastavuje rozmery alebo veľkosť pre voľbu max-col-width. |
| Atribút | max-col-width |
| Typ | number |
| Predvolené | - |
| Popis | Nastavuje číselnú hodnotu používanú vo voľbe gap. |
| Atribút | gap |
| Typ | number |
| Predvolené | - |
| Popis | Nastavuje rozmery alebo veľkosť pre voľbu cols. |
| Atribút | cols |
| Typ | number |
| Predvolené | - |
Pre tento komponent nie sú dostupné žiadne udalosti.
| Popis | Vykreslí cols v používateľskom rozhraní komponentu. |
| Signatúra | (colCount: number) => void |
| Popis | Spustí metódu scheduleLayout na vykonanie logiky komponentu a aktualizáciu jeho stavu. |
| Signatúra | (ms: number) => void |
| Názov | Popis |
|---|
native | Štýluje koreňovú shadow časť komponentu. |
column | Štýluje shadow časť column. |
| Názov | Popis |
|---|
--wje-masonry-layout-gap | Vlastná CSS premenná, ktorá riadi layout gap. |
--wje-masonry-layout-col-count | Vlastná CSS premenná na štýlovanie komponentu (layout col count). |
| Názov | Popis |
|---|
default | Predvolený slot pre hlavný obsah komponentu. |