CataUiMasonryTile

CataUiMasonryTile is a component designed to be used within the CataUiMasonry layout. Each tile serves as a container for content in a masonry grid, providing a consistent card-like appearance with border, shadow, and rounded corners.

Basic Usage

The CataUiMasonryTile component must be used within a CataUiMasonry component's tiles slot. Each tile will automatically arrange itself in the masonry grid layout.

<CataUiMasonry>
    <template #tiles="{ msnry }">
        <CataUiMasonryTile>
            <h4 style="height:200px">Content1</h4>
        </CataUiMasonryTile>
        <CataUiMasonryTile>
            <h4 style="height:150px">Content2</h4>
        </CataUiMasonryTile>
        <CataUiMasonryTile>
            <h4 style="height:100px">Content3</h4>
        </CataUiMasonryTile>
        <CataUiMasonryTile>
            <h4 style="height:200px">Content4</h4>
        </CataUiMasonryTile>
        <CataUiMasonryTile>
            <h4 style="height:150px">Content5</h4>
        </CataUiMasonryTile>
    </template>
</CataUiMasonry>

Slots

Notes

• The tile component is designed to work exclusively with the CataUiMasonry component.
• The tiles will automatically arrange based on their content height.
• Each tile features a consistent visual style with border, shadow, and rounded corners.
• The parent CataUiMasonry component handles the responsive layout of the tiles at different viewport widths.