Слайд-контейнер

Назначение

Этот контейнер позволяет показывать свое содержимое в виде диалога, который появлется (выскальзывает) из-за пределов экрана. Видимость контейнера можно регулировать с помощью атрибута open или методов веб-компонента. Атрибут modal указыват намодальность диалога.

Использование

import { useState, useEffect } from 'react';
import { useSlide } from 'effsz/slide';

const { observe } = useSlide();

export const App = () => {
    const [open, setOpen] = useState(false);
    useEffect(() => {
        const unobserve = observe((event) => {
            // обработка событий контейнера
        });
        return () => unobserve();
    }, [])
    return <div>
        <button
            onClick={() => setOpen((val) => !val)}
        >...</button>
        <effsz-slide open={open} modal={true}>
            <div>...</div>
        </effsz-slide>
    </div>
};

Типизация

/**
 * Slide container attributes
 */
export interface ISlideContainerAttrs {
    /**
     * Is slide container open
     */
    open: boolean;
    /**
     * Is slide container modal
     */
    modal: boolean;
    /**
     * Position
     */
    pos: 'l' | 't' | 'r' | 'b';
    /**
     * Backdrop alpha coef
     */
    alpha: number;
    /**
     * Backdrop blur coef
     */
    blur: number;
    /**
     * Swipe distance in px to close container
     * @description
     * `30` by default. If equals `0` then container won`t close
     */
    swipe: number;

    // transition

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

/**
 * Slide container
 */
export interface ISlideContainerElement extends HTMLElement {
    get dialog(): HTMLDialogElement;
    get isOpen(): boolean;
    /**
     * Open
     */
    open(): Promise<void>;
    /**
     * Close
     */
    close(): Promise<void>;
    /**
     * Toggle
     */
    toggle(): Promise<void>;
}