Masonry-контейнер

Назначение

В этом контейнере для одной оси используется обычная строгая сетка, а для другой - раскладка типа masonry (каменная кладка). Компонент отображает содержимое через слоты, и каждый слотовый элемент должен иметь атрибут slot со своим порядковым индексом и значение соотношения сторон, определенное либо с помощью свойства aspect-ratio внутри атрибута style, либо с помощью атрибута data-effsz-ar. Компонент может быть полезен для отображения большого количества изображений с различным соотношением сторон.

Использование

import { useEffect } from 'react';
import { useMasonry } from 'effsz/masonry';

const { observe } = useMasonry();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // обработка событий контейнера
        });
        return () => unobserve();
    }, [])
    return <effsz-masonry axis='y' tracks='3' trackgap='0.4rem'>
        <div slot="0" data-effsz-ar="16/9">...</div>
        <div slot="1" data-effsz-ar="9/16">...</div>
        <div slot="2" data-effsz-ar="3/4">...</div>
        <div slot="3" data-effsz-ar="1">...</div>
        <div slot="4" data-effsz-ar="0.5">...</div>
    </effsz-masonry>
};

Типизация

/**
 * Masonry container attributes
 */
export interface IMasonryContainerAttrs {
    /**
     * Main axis
     */
    axis: 'x' | 'y';
    /**
     * Number of tracks
     */
    tracks: string;
    /**
     * Slots divider aspect ratio
     * @description
     * Default value is `0.1` for x-axis container and `10` for y-axis
     */
    divratio: string;
    /**
     * Gap between tracks
     */
    trackgap: string;
};

/**
 * Masonry container
 */
export interface IMasonryContainerElement extends HTMLElement {
    get axis(): 'x' | 'y';
    set axis(val: 'x' | 'y');
};