Contenedor dividido

Propósito

Este contenedor divide su área en ranuras redimensionables. Esto resulta útil para crear un diseño personalizable donde cada ranura se puede expandir o contraer.

Uso

Este componente muestra el contenido mediante ranuras. Cada elemento de la ranura, excepto la última, debe contener un atributo slot con su número de secuencia en el diseño, comenzando desde 1. Una ranura sin nombre se considerará la última.

Los tamaños iniciales de las ranuras, con la excepción de la última, se especifican en el atributo ini. El tamaño de la ranura se especifica como un número decimal del 0 al 1. La última ranura ocupa el espacio restante en el contenedor.

Los tamaños mínimos de las ranuras se especifican en el atributo min. El tamaño mínimo de la última ranura también se puede especificar en este atributo.

import { useEffect } from 'react';
import { useSplit } from 'effsz/split';

const { observe } = useSplit();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // manejar eventos divididos
        });
        return () => unobserve();
    }, [])
    return <effsz-split
        ini='0.25 0.5'
        min='0.25 0.1 0.1'
        fdir='r'
    >
        <div className='first' slot='1'>...</div>
        <div className='second' slot='2'>...</div>
        <div className='last'>...</div>
    </effsz-split>;
};

Tipos

/**
 * Split container attributes
 */
export interface ISplitContainerAttrs {
    // size

    /**
     * Initial size
     */
    ini: string;
    /**
     * Min size
     */
    min: string;
    /**
     * Flex-direction
     */
    fdir: 'r' | 'rr' | 'c' | 'cr';
    /**
     * Flex gap
     */
    gap: string;

    // resizer

    /**
     * Resizer thickness
     */
    th: string;
    /**
     * Active resizer color
     */
    acol: string;
    /**
     * Passive resizer color
     */
    pcol: string;

    // transition

    /**
     * Transition-timing-function
     */
    tf: string;
    /**
     * Resize transition duration
     */
    dur: string;
    /**
     * Resize transition delay
     */
    del: string;
    /**
     * Color transition duration
     */
    cdur: string;
}

/**
 * Split container
 */
export interface ISplitContainerElement extends HTMLElement {
    /**
     * Split axis
     */
    get axis(): 'x' | 'y';
    /**
     * Split reversed flag
     */
    get isReversed(): boolean;
    /**
     * Set size array
     */
    set sizes(val: number[]);
    /**
     * Get size array
     */
    get sizes(): number[];
    /**
     * Get rest size
     */
    get lastSize(): number;
    /**
     * Save size
     */
    saveSize(): void;
    /**
     * Restore previous value
     * @param initial - restore initial value
     */
    restoreSize(initial?: boolean): void;
}