Skip to main content

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

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.

Atribúty a Vlastnosti

inches

DescriptionDefines the number of columns. For auto, selects the number of columns according to the width of the parent.
Attributeinches
Typestring | undefined
Defaultauto

debounce

DescriptionSpecifies the time in ms for the layout to reformat for each change in masonry layout size. This reflow is delayed to prevent the layout algorithm from being invoked too often in succession.
Attributedebounce
Typestring | undefined
Default300

gap

DescriptionDefines the width of the space between columns in pixels.
Attributegap
Typestring | undefined
Default24

max-col-width

DescriptionSets the maximum width of the columns in pixels.
Attributemax-col-width
Typestring | undefined
Default500

Eventy

No events available for this component.

Metódy

No public methods available for this component.

CSS Shadow Parts

NameDescription
columnRefers to all columns inside the element.
column-indexRefers to a specific column element within an element, where index represents the column order. The order starts with zero.
nativeRefers to a div element inside an element.

CSS Custom Vlastnosti

NameDescription
--wj-masonry-layout-col-countDefines the number of columns in the masonry layout.
--wj-masonry-layout-gapSpecifies the gap between items in the masonry layout.

Sloty

NameDescription
{index}The contents are placed in a column, index represents the column order.