Masonryコンテナ

目的

このコンテナでは、一方の軸は典型的な厳密なグリッドレイアウトを使用し、もう一方の軸はメイソンリーレイアウトを使用します。コンテンツはスロットを通して表示され、各スロット要素には、順序インデックスと、style属性内のaspect-ratioプロパティを使用するか、data-effsz-ar属性を使用して定義されたアスペクト比の値を持つslot属性が必要です。これは、アスペクト比が異なる多数の画像を表示する場合に便利です。

使用法

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>
};

TypeScriptの型

/**
 * 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');
};