Contenedor de mampostería

Propósito

En este contenedor, un eje utiliza una cuadrícula estricta típica y el otro una mampostería. Muestra el contenido mediante ranuras, y cada elemento ranurado debe tener un atributo slot con su índice ordinal y un valor de relación de aspecto definido mediante la propiedad aspect-ratio dentro del atributo style o mediante el atributo data-effsz-ar. Esto puede ser útil para mostrar muchas imágenes con diferentes relaciones de aspecto.

Uso

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

const { observe } = useMasonry();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // Gestionar eventos de albañilería
        });
        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>
};

Typos

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