Kapsayıcıyı genişlet

Amaç

Bu kapsayıcı, önceden tanımlanmış max (maksimum) ve min (minimum) boyutlara göre genişletilebilir veya daraltılabilir. Maksimum boyut belirtilmediği takdirde, kapsayıcı genişletildiğinde tüm alt öğelerini gösterir. Minimum boyut belirtilmediği durumlarda ise kapsayıcının boyutu sıfır olur. Bu özellik, düzen bölümlerini dinamik olarak göstermek veya gizlemek için kullanışlı olabilir.

Kullanım

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) => {
            // genişletme olaylarını işle
        });
        return () => unobserve();
    }, [])
    return <div>
        <button
            onClick={() => setOpen((val) => !val)}
        >...</button>
        <effsz-expand open={open} min="20px">
            <div>...</div>
        </effsz-expand>
    </div>
};

Türler

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