Slide container

Purpose

This container allows you to display its contents in the form of a dialog that appears (slides out) from off the screen. The visibility of the container can be adjusted using the open attribute or methods of the web component. The modal attribute indicates the modality of the dialog.

Usage

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) => {
            // handle slide events
        });
        return () => unobserve();
    }, [])
    return <div>
        <button
            onClick={() => setOpen((val) => !val)}
        >...</button>
        <effsz-slide open={open} modal={true}>
            <div>...</div>
        </effsz-slide>
    </div>
};

Types

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