Slayt kapsayıcısı

Amaç

Bu kapsayıcı, içeriğini ekran dışından kayarak gelen bir diyalog biçiminde görüntülemenizi sağlar. Kapsayıcının görünürlüğü, open özniteliği veya web bileşeninin metotları kullanılarak ayarlanabilir. modal özniteliği ise diyalogun modal (kalıcı/odaklanmış) yapıda olup olmadığını belirtir.

Kullanım

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) => {
            // kaydırma olaylarını yönet
        });
        return () => unobserve();
    }, [])
    return <div>
        <button
            onClick={() => setOpen((val) => !val)}
        >...</button>
        <effsz-slide open={open} modal={true}>
            <div>...</div>
        </effsz-slide>
    </div>
};

Türler

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