Duvar Örgüsü Konteyneri

Amaç

Bu konteynerde bir eksen tipik katı ızgara düzenini, diğeri ise duvar örgüsü düzenini kullanır. İçeriği yuvalar aracılığıyla görüntüler ve her yuvalı öğenin, sıralı indeksi ve style özniteliği içindeki aspect-ratio özelliği veya data-effsz-ar özniteliği kullanılarak tanımlanan bir en boy oranı değeriyle birlikte bir slot özniteliğine sahip olması gerekir. Bu, farklı en boy oranlarına sahip birçok görüntüyü görüntülemek için yararlı olabilir.

Kullanım

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

const { observe } = useMasonry();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // masonry olaylarını yönet
        });
        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>
};

Türler

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