VueCraft NPM

Composable useMasonry ​

useMasonry(container, options?) — выход для случаев, когда слот-на-карточку раскладка <MasonryGrid> не подходит. Элементы карточек остаются полностью вашими — это только подключает движок к контейнеру и держит его в синхроне с реактивными карточками.

ts
function useMasonry(
  container: MaybeRefOrGetter<HTMLElement | null | undefined>,
  options?: UseMasonryOptions,
): UseMasonryReturn

Создаёт движок при монтировании и автоматически уничтожает его при размонтировании.

Опции ​

UseMasonryOptions расширяет MasonryOptions (смотрите API движка) одним дополнительным реактивным полем:

items ​

MaybeRefOrGetter<RefFriendlyMasonryItem[]> · опционально

RefFriendlyMasonryItem — это MasonryItemDescriptor ядра, у которого el дополнительно принимает Vue ref/getter, а не только обычный элемент — карточка, у которой el изначально null (её template ref ещё не смонтирован), синхронизируется автоматически, как только разрешится. Можно не задавать это поле совсем, тогда карточками нужно управлять самостоятельно через engine.value.setItems(...).

Возвращаемое значение ​

engine ​

ShallowRef<MasonryEngine | null>

Инстанс движка (смотрите API движка) — null, пока компонент не смонтируется и container не разрешится в реальный элемент. Используйте это для всего, что не покрывает реактивная опция items: addItem/removeItem/updateItem, relayout(), on(), либо для вызова setItems вручную вместо передачи реактивной опции.

Пример:

vue
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useMasonry } from '@macrulez/masonry-kit-vue'

const containerEl = ref<HTMLElement | null>(null)
const cardAEl = ref<HTMLElement | null>(null)
const cardBEl = ref<HTMLElement | null>(null)

const items = computed(() => [
  { id: 'a', el: cardAEl },
  { id: 'b', el: cardBEl, colSpan: 2 },
])

const { engine } = useMasonry(containerEl, { items, columns: 'auto', minLaneSize: 240 })
</script>

<template>
  <div ref="containerEl">
    <div ref="cardAEl">A</div>
    <div ref="cardBEl">B</div>
  </div>
</template>