Split container

Purpose

This container splits its area between slots that can be resized. This can be useful for creating a customizable layout where each slot can be expanded or shortened.

Usage

This component displays the content using slots. Each slotted element except the last one must contain an slot attribute with its sequence number in the layout starting from 1. An unnamed slot will be considered the last one.

The initial slot sizes, with the exception of the last one, are specified in the ini attribute. The slot size is specified as a decimal number from 0 to 1. The last slot takes up the remaining space in the container.

The minimum slot sizes are specified in the min attribute. The last slot minimum size can also be specified in this attribute.

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

const { observe } = useSplit();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // handle split events
        });
        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>;
};

Types

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