Masonry

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.

Základné použitie

Ukážka zobrazuje základnú masonry skladbu bez ďalších obmedzení, aby bolo jasné, ako sa prvky prirodzene ukladajú do stĺpcov.

Maximálna šírka stĺpcov

Použitím atribútu max-col-width obmedzíte šírku stĺpcov na zadanú hodnotu.

Gap

Použitím atribútu gap určíte šírku medzery medzi stĺpcami v pixeloch.

Kedy použiť

Použite wje-masonry na skladanie stabilného rozloženia stránky s jasnou hierarchiou obsahu.

Kedy nepoužiť

Nepoužívajte ho na riešenie biznis logiky ani na stavovú orchestráciu komponentov.

Prístupnosť

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.

Atribúty a vlastnosti

cols

Popis	Nastavuje rozmery alebo veľkosť pre voľbu cols.
Atribút	cols
Typ	number
Predvolené	-

debounce

Popis	Nastavuje číselnú hodnotu používanú vo voľbe debounce.
Atribút	debounce
Typ	number
Predvolené	-

gap

Popis	Nastavuje číselnú hodnotu používanú vo voľbe gap.
Atribút	gap
Typ	number
Predvolené	-

maxColWidth

Popis	Nastavuje rozmery alebo veľkosť pre voľbu max-col-width.
Atribút	max-col-width
Typ	number
Predvolené	-

Udalosti

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

renderCols

Popis	Vykreslí cols v používateľskom rozhraní komponentu.
Signatúra	(colCount: number) => void

scheduleLayout

Popis	Spustí metódu scheduleLayout na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(ms: number) => void

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
column	Štýluje shadow časť column.

CSS vlastné premenné

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).

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.