Bölünmüş kapsayıcı (Split container)

Amaç

Bu kapsayıcı, alanını yeniden boyutlandırılabilir bölmelere (slot) ayırır. Bu, her bir bölmenin genişletilebildiği veya daraltılabildiği, özelleştirilebilir bir düzen oluşturmak için kullanışlıdır.

Kullanım

Bu bileşen, içeriği bölmeler (slotlar) aracılığıyla görüntüler. Sonuncusu hariç her bir öğe, düzen içindeki sıra numarasını (1'den başlayarak) belirten bir slot özniteliğine sahip olmalıdır. Herhangi bir sıra numarası belirtilmeyen (isimlendirilmemiş) bir bölme, otomatik olarak son bölme kabul edilir.

Sonuncusu hariç olmak üzere, bölmelerin başlangıç ​​boyutları ini özniteliği ile belirlenir. Bölme boyutu, 0 ile 1 arasında ondalık bir sayı olarak ifade edilir. Son bölme ise kapsayıcıda kalan boş alanın tamamını kaplar.

Bölmelerin minimum boyutları min özniteliği ile tanımlanır. Son bölmenin minimum boyutu da yine bu öznitelik kullanılarak belirtilebilir.

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

const { observe } = useSplit();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // bölünme olaylarını ele al
        });
        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>;
};

Türler

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