CataUiMasonry

The CataUiMasonry component creates a responsive grid layout with a masonry effect, where items are optimally positioned based on available vertical space. It's built on top of the masonry-layout library.

Basic Usage

<CataUiMasonry>
    <template #tiles="{ msnry }">
        <!-- CataUiMasonryTile(s) here -->
    </template>
</CataUiMasonry>

Example

<CataUiMasonry>
    <template #tiles="{ msnry }">
        <CataUiMasonryTile>
            <div>Tile content 1</div>
        </CataUiMasonryTile>
        <CataUiMasonryTile>
            <div>Tile content 2 with more height</div>
        </CataUiMasonryTile>
        <CataUiMasonryTile>
            <div>Tile content 3</div>
        </CataUiMasonryTile>
    </template>
</CataUiMasonry>

Tips

It's possible to use any custom element as a tile, the only requirement is that the class cata-ui-masonry-tile is added to each element.

Responsive Behavior

The masonry layout is responsive and adapts to the container width:

  • 100% width on small containers
  • 50% width when container is at least 576px wide
  • 25% width when container is at least 992px wide
  • 20% width when container is at least 1400px wide

Properties

The component does not expose any configurable properties.

Events

The component does not emit any events.

Slots

SlotDescription
tilesA scoped slot that provides access to the Masonry instance via the msnry property, allowing for direct manipulation of the layout if needed.

Usage with the Masonry Instance

The msnry object exposed in the scoped slot provides access to the underlying masonry instance, which can be used to perform operations like layout refreshing after dynamic content changes:

<CataUiMasonry>
    <template #tiles="{ msnry }">
        <CataUiMasonryTile v-for="item in items" :key="item.id">
            <div>{{ item.content }}</div>
        </CataUiMasonryTile>
        <button @click="() => { addItem(); $nextTick(() => msnry.layout()); }">
            Add Item
        </button>
    </template>
</CataUiMasonry>