コンテナを展開する

目的

このコンテナは、それぞれ定義済みのmaxサイズとminサイズに拡張または折りたたむことができます。最大サイズが指定されていない場合は、拡張時にすべての子要素が表示されます。最小サイズが指定されていない場合は、サイズはゼロになります。これは、レイアウトセグメントを動的に表示または非表示にする場合に役立ちます。

使用法

import { useState, useEffect } from 'react';
import { useExpand } from 'effsz/expand';

const { observe } = useExpand();

export const App = () => {
    const [open, setOpen] = useState(false);
    useEffect(() => {
        const unobserve = observe((event) => {
            // 拡張イベントを処理する
        });
        return () => unobserve();
    }, [])
    return <div>
        <button
            onClick={() => setOpen((val) => !val)}
        >...</button>
        <effsz-expand open={open} min="20px">
            <div>...</div>
        </effsz-expand>
    </div>
};

TypeScriptの型

/**
 * Expand container attributes
 */
export interface IExpandContainerAttrs {
    /**
     * Main axis
     */
    axis: 'x' | 'y';
    /**
     * Min size
     */
    min: string;
    /**
     * Max size
     */
    max: string;
    /**
     * Is container expanded
     */
    open: boolean;

    // transition

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

/**
 * Expand container
 */
export interface IExpandContainerElement extends HTMLElement {
    get axis(): 'x' | 'y';
    set axis(val: 'x' | 'y');
    get isOpen(): boolean;
    get size(): number;
    /**
     * Expand to max size
     */
    expand(): void;
    /**
     * Collapse to min size
     */
    collapse(): void;
    /**
     * toggle
     */
    toggle(): void;
}