Разделяемый контейнер

Назначение

Этот контейнер разделяет свою область на слоты, размер которых можно изменять. Это может быть полезно для создания динамического макета, в котором каждая часть может быть расширена или сокращена.

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

Этот компонент отображает содержимое с использованием слотов. Каждый элемент слота, кроме последнего, должен содержать атрибут slot, порядковый номер, начиная с 1. Неименованный слот будет считаться последним.

Начальные размеры слотов, за исключением последнего, указываются в атрибуте ini. Размер слота указывается в виде десятичного числа от 0 до 1. Последний слот занимает оставшееся место в контейнере.

Минимальные размеры слотов указанываются в атрибуте min. Минимальный размер последнего слота также может быть указан в этом атрибуте.

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

const { observe } = useSplit();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // обработка событий контейнера
        });
        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>;
};

Типизация

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