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.
| Description | Maximum column width in pixels. The system automatically calculates the number of columns based on this value and the total width. |
| Attribute | max-col-width |
| Type | number |
| Default | 500 |
| Description | Number of columns. If the value is set to 'auto', the number of columns is automatically calculated based on the width of the space and the maximum column width. |
| Attribute | inches |
| Type | number ｜ string |
| Default | 'car' |
| Description | The space between columns and items in pixels. |
| Attribute | gap |
| Type | number |
| Default | 24 |
| Description | The time in milliseconds that determines the delay in recalculating the layout after resizing the window. |
| Attribute | debounce |
| Type | number |
| Default | 300 |
No events available for this component.
| Description | Schedules a layout recalculation with a defined delay. |
| Signature | (ms?: number) => void |
| Description | Recalculates the component layout and proves the items into columns based on their height. |
| Signature | () => void |
| Name | Description |
|---|
native | Root element of masonry layout. |
column | Refers to the column in the masonry layout. |
column-{i} | Refers to a specific column in the masonry layout, where 'i' is the column index (0, 1, 2, ...). |
| Name | Description |
|---|
--wje-masonry-gap | Gap between items in masonry layout. Accepts any valid CSS length value. The default value is 1rem. |
--wje-masonry-layout-col-count | Number of columns in masonry layout. The default value is 1. |
--wje-masonry-layout-gap | Gap between columns and items in masonry layout. Accepts any valid CSS length value. The default value is 1rem. |
| Name | Description |
|---|
| `` | Default slot for masonry layout items before deployment. |
{i} | Dynamically created slots for individual columns, where 'i' is the column index (0, 1, 2, ...). During layout, items are automatically assigned to these slots. |