shadow
The Masonry component creates a responsive "Masonry" layout of child elements that are dynamically arranged into columns based on specified attributes. Supports customizing the number of columns, maximum column width, element spacing, and debouncing to optimize performance.
Use the max-col-width attribute to limit the width of the columns to the specified value.
Use the gap attribute to specify the width of the gap between columns in pixels.
| 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. |