The amount of columns of the masonry.
Can be a number, an object which defines multiple breakpoints or a JSON string of this object.
If an object is provided, not all breakpoints have to be set. If a breakpoint of an orientation-width combination is not set, for the width breakpoint and than for the dimension breakpoint is looked for. If none is set, the default value is used.
Permitted keys for the object are: default, xs, sm, md, lg, xl, horizontal, vertical, horizontal-xs, horizontal-sm, horizontal-md, horizontal-lg, horizontal-xl, vertical-xs, vertical-sm, vertical-md, vertical-lg, vertical-xl
Additional classes given to the empty children which are created when less children than columns are present and/or a featured first child is shown.
The amount of columns a featured first child spans. Can not be more than the actual columns of the masonry. If set to 0 or null, the first child is not featured. If the first child is featured, it gets the class "hylo-masonry-feature" and this WebComponent gets the class "hylo-masonry-has-feature".
Don't forget to adjust the width style of the featured child.
Can be a number, an object which defines multiple breakpoints or a JSON string of this object.
If an object is provided, not all breakpoints have to be set. If a breakpoint of an orientation-width combination is not set, for the width breakpoint and than for the dimension breakpoint is looked for. If none is set, the default value is used.
Permitted keys for the object are: default, xs, sm, md, lg, xl, horizontal, vertical, horizontal-xs, horizontal-sm, horizontal-md, horizontal-lg, horizontal-xl, vertical-xs, vertical-sm, vertical-md, vertical-lg, vertical-xl
A featured child is taken out of the actual masonry grid and laid over the grid. Empty children are created (one for each column the featured child spans) which function as placeholder for the featured child. The empty children will get the class "hylo-masonry-empty-feature".
An offset added to the calculated height of the component. A possible use is to counter vertical paddings of the component.
If you have to set vertical margins or a row-gap, you can define the additional height with this property.
Shows a skeleton preload animation until all nested hylo-responsive-image(s) are ready.
hylo-responsive-image(s) have to be present as child elements since the masonry is waiting for the loading of the hylo-responsive-image components. Failsafe fires after 5 seconds if no hylo-responsive-image component emits a "hyloComponentLoaded" event.
If set to "hide", no animation will be shown but the masonry will still be hidden until all nested hylo-responsive-image(s) are ready.
The masonry gets recalculated serveral times (e.g. when an image gets loaded). Since the height of the masonry is set when calculated, it might influence the calculation at the next recalculation. Set this property to unset the height before recalculation if this happens.
Generated using TypeDoc
Creates a masonry with the direct children.
The children should not have top or bottom margin set since it is ignored in the calculation. If you need margins, wrap the child in an extra element.
You have to set the width of the children accordingly to the amount of columns and their space between them. Don't set a horizontal css "gap" or "row-gap". The space between the children will distribute evenly. Make sure the height of the items is fixed and not set to 100% (height: auto or a specific value).
If less children than columns are present, the component is creating empty children with the class "hylo-masonry-empty-row" to fill the remaining rows. Make sure to set their width as well.
To reduce layout jumping, especially when using lazy image loading, you can set the column-gap of the masonry to half the value of the actual supposed gap value. If you set a row-gap, don't forgat to adjust the property "itemHeightOffset".
A hylo-breakpoint-listener component should be present in the page to react to breakpoint changes.