分割コンテナ

目的

このコンテナは、サイズ変更可能なスロット間で領域を分割します。これは、各スロットを拡張または短縮できるカスタマイズ可能なレイアウトを作成する場合に役立ちます。

使用法

このコンポーネントは、スロットを使用してコンテンツを表示します。最後のスロットを除く各スロット要素には、レイアウト内でのシーケンス番号（1から始まる）を指定したslot属性が必要です。名前のないスロットは最後のスロットとみなされます。

最後のスロットを除く初期スロットサイズは、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>;
};

TypeScriptの型

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