滑动容器

目的

此容器允许您以对话框的形式显示其内容，对话框会从屏幕外滑出。您可以使用 open 属性或 Web 组件的相应方法来调整容器的可见性。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) => {
            // handle slide events
        });
        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>;
}