برنامه نویسی

بیایید با استفاده از React و Tailwind CSS یک کشو متحرک بسازیم

Summarize this content to 400 words in Persian Lang
مؤلفه کشو توسط Material UI رایج شد. این یک پانل کشویی است که اغلب برای پیمایش و نمایش محتوای اضافی استفاده می شود. از کنار صفحه به داخل می لغزد و محتوای اصلی را پوشانده است. این الگوی طراحی برای منوها، فیلترها یا هر عنصری که می‌خواهید بدون به هم ریختگی رابط اصلی فوکوس کنید، مناسب است.

این طرحی است که ما قصد داریم با استفاده از React و Tailwind CSS ایجاد کنیم

کشو از سمت چپ صفحه بر اساس کلیک روی دکمه به داخل اسلاید می‌شود.

جای کشو

کشو ذاتاً یک جزء مودال است. بنابراین ما باید آن را خارج از جریان محتوای HTML و در بالای آن رندر کنیم، همان کاری که با دیالوگ ها انجام می دهیم.

React پورتال ها را به عنوان یک راه حل فنی برای این مشکل به ما ارائه می دهد. این به توسعه دهندگان اجازه می دهد تا فرزندان جزء را به یک گره DOM که خارج از سلسله مراتب مولفه والد وجود دارد، تبدیل کنند.

اکنون می‌خواهیم کامپوننتی ایجاد کنیم تا پورتال‌ها را به آن اضافه کنیم document.body، اطمینان حاصل شود که آنها در بالای محتوای اصلی ارائه می شوند.

import type {FC, ReactNode} from ‘react’;
import {useId, useState, useEffect} from ‘react’;
import {createPortal} from ‘react-dom’;

export type Props = {
children: ReactNode;
};

export const Portal: FC<Props> = ({children}) => {
// assign unique id to easily find portal in DOM
const id = useId();
const [containerAttached, setContainerAttached] = useState(false);
useEffect(() => {
// check if conatiner attached to the DOM
if (!containerAttached) {
const element = document.createElement(‘div’);
element.id = id;
document.body.appendChild(element);
setContainerAttached(true);
}
// don’t forget to remove container when portal unmounts
return () => {
containerAttached && document.getElementById(id)!.remove();
};
}, [id, containerAttached]);

return containerAttached
&& createPortal(children, document.getElementById(id)!, id);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

API جزء کشو

از نظر ویژگی‌ها، باید بتوانیم وضعیت باز/بستن کشو را کنترل کنیم. و همچنین ویژگی هایی را برای تنظیم ظاهر و احساس آن ارائه خواهیم کرد.

در زیر API کاملی است که ما برای کامپوننت پیاده سازی خواهیم کرد.

type Props = {
// Control Drawer visibility
isOpen?: boolean;
// Provide an external class name
className?: string;
// Callback to trigger when modal needs to be closed
onDismiss?: () => void;
};

export const Drawer: FC<Props> = ({
isOpen,
children,
className,
onDismiss,
}) => {
// provide user a way to close Drawer
const handleBackdropClick = useCallback(() => {
onDismiss?.();
}, [onDismiss]);
return (
<Portal>
{isOpen && (
<Fragment>
{/* Backdrop */}
<div onClick={handleBackdropClick} />
{/* Drawer content */}
<div>{children}div>
Fragment>
)}
Portal>
);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کشو متحرک

برای مطابقت با طرح ارائه شده، باید بین این دو حالت بصری رندر و متحرک سازی کنیم:

حالت کشو
شروع کنید
انیمیشن
پایان

وارد کنید
برای کاربر قابل مشاهده نیست. پشت حاشیه سمت چپ.
از پشت گوشه سمت چپ به راست می لغزد
کاملا قابل مشاهده است

خارج شوید
کاملا قابل مشاهده است
اسلایدهایی که پشت گوشه سمت چپ باقی مانده اند
برای کاربر قابل مشاهده نیست. پشت حاشیه سمت چپ.

برای پیاده سازی این باید اضافه کنیم وارد کنید و خروج انیمیشن ها در حالی که اجرای اولی فقط با استفاده از CSS آسان است، دومی ما را ملزم به استفاده از جاوا اسکریپت برای دستکاری DOM می کند. کتابخانه UI Headless Tailwind دارای یک جزء Transition مناسب است.

const Drawer: FC<Props> = ({ isOpen, children, className }) => {
return (
// `show` controls visibility.
// `appear` plays animation when rendered first time
<Transition show={isOpen} appear={true}>
<TransitionChild>
<div
className={classNames(
// Tailwind classes to stick Drawer to the left side
‘fixed bottom-0 left-0 h-dvh’,
// Configure transition between states.
‘transition duration-300 ease-in’,
// `data-[closed]:` selector applies appended
// class name when Drawer is in the closed state.
// `-translate-x-full` moves the element 100% width left
‘data-[closed]:-translate-x-full’,
// Helpful for component reusability
className,
)}
>
{children}
div>
TransitionChild>
Transition>
);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس زمینه یک ظاهر طراحی شده

Backdrop عنصری است که بین محتوای اصلی و عنصر مدال رندر شده است. ما باید کلاس های Tailwind CSS زیر را به آن ارائه دهیم:

fixed: موقعیت را تنظیم می کند: ثابت.inset-0: میانبر CSS برای بالا، راست، چپ، پایین: 0;bg-gray-300/30: رنگ پس زمینه و کدورت را تنظیم می کند.backdrop-blur-sm: محتوای اصلی را محو می کند.

نسخه ی نمایشی کامل

مؤلفه کشو توسط Material UI رایج شد. این یک پانل کشویی است که اغلب برای پیمایش و نمایش محتوای اضافی استفاده می شود. از کنار صفحه به داخل می لغزد و محتوای اصلی را پوشانده است. این الگوی طراحی برای منوها، فیلترها یا هر عنصری که می‌خواهید بدون به هم ریختگی رابط اصلی فوکوس کنید، مناسب است.

این طرحی است که ما قصد داریم با استفاده از React و Tailwind CSS ایجاد کنیم

طراحی کشو

کشو از سمت چپ صفحه بر اساس کلیک روی دکمه به داخل اسلاید می‌شود.

انیمیشن کشو

جای کشو

کشو ذاتاً یک جزء مودال است. بنابراین ما باید آن را خارج از جریان محتوای HTML و در بالای آن رندر کنیم، همان کاری که با دیالوگ ها انجام می دهیم.

React پورتال ها را به عنوان یک راه حل فنی برای این مشکل به ما ارائه می دهد. این به توسعه دهندگان اجازه می دهد تا فرزندان جزء را به یک گره DOM که خارج از سلسله مراتب مولفه والد وجود دارد، تبدیل کنند.

اکنون می‌خواهیم کامپوننتی ایجاد کنیم تا پورتال‌ها را به آن اضافه کنیم document.body، اطمینان حاصل شود که آنها در بالای محتوای اصلی ارائه می شوند.

import type {FC, ReactNode} from 'react';
import {useId, useState, useEffect} from 'react';
import {createPortal} from 'react-dom';

export type Props = {
    children: ReactNode;
};

export const Portal: FC<Props> = ({children}) => {
    // assign unique id to easily find portal in DOM
    const id = useId();
    const [containerAttached, setContainerAttached] = useState(false);
    useEffect(() => {
        // check if conatiner attached to the DOM
        if (!containerAttached) {
            const element = document.createElement('div');
            element.id = id;
            document.body.appendChild(element);
            setContainerAttached(true);
        }
        // don't forget to remove container when portal unmounts
        return () => {
            containerAttached && document.getElementById(id)!.remove();
        };
    }, [id, containerAttached]);

    return containerAttached 
        && createPortal(children, document.getElementById(id)!, id);
};
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

API جزء کشو

از نظر ویژگی‌ها، باید بتوانیم وضعیت باز/بستن کشو را کنترل کنیم. و همچنین ویژگی هایی را برای تنظیم ظاهر و احساس آن ارائه خواهیم کرد.

در زیر API کاملی است که ما برای کامپوننت پیاده سازی خواهیم کرد.

type Props = {
    // Control Drawer visibility
    isOpen?: boolean;
    // Provide an external class name
    className?: string;
    // Callback to trigger when modal needs to be closed
    onDismiss?: () => void;
};

export const Drawer: FC<Props> = ({
    isOpen,
    children,
    className,
    onDismiss,
}) => {
    // provide user a way to close Drawer
    const handleBackdropClick = useCallback(() => {
        onDismiss?.();
    }, [onDismiss]);
    return (
        <Portal>
            {isOpen && (
                <Fragment>
                    {/* Backdrop */}
                    <div onClick={handleBackdropClick} />
                    {/* Drawer content */}
                    <div>{children}div>
                Fragment>
            )}
        Portal>
    );
};
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کشو متحرک

برای مطابقت با طرح ارائه شده، باید بین این دو حالت بصری رندر و متحرک سازی کنیم:

حالت کشو شروع کنید انیمیشن پایان
وارد کنید برای کاربر قابل مشاهده نیست. پشت حاشیه سمت چپ. از پشت گوشه سمت چپ به راست می لغزد کاملا قابل مشاهده است
خارج شوید کاملا قابل مشاهده است اسلایدهایی که پشت گوشه سمت چپ باقی مانده اند برای کاربر قابل مشاهده نیست. پشت حاشیه سمت چپ.

برای پیاده سازی این باید اضافه کنیم وارد کنید و خروج انیمیشن ها در حالی که اجرای اولی فقط با استفاده از CSS آسان است، دومی ما را ملزم به استفاده از جاوا اسکریپت برای دستکاری DOM می کند. کتابخانه UI Headless Tailwind دارای یک جزء Transition مناسب است.

const Drawer: FC<Props> = ({ isOpen, children, className }) => {
    return (
        // `show` controls visibility. 
        // `appear` plays animation when rendered first time
        <Transition show={isOpen} appear={true}>
            <TransitionChild>
                <div
                    className={classNames(
                        // Tailwind classes to stick Drawer to the left side
                        'fixed bottom-0 left-0 h-dvh',
                        // Configure transition between states.
                        'transition duration-300 ease-in',
                        // `data-[closed]:` selector applies appended
                        // class name when Drawer is in the closed state.
                        // `-translate-x-full` moves the element 100% width left
                        'data-[closed]:-translate-x-full',
                        // Helpful for component reusability
                        className,
                    )}
                >
                    {children}
                div>
            TransitionChild>
        Transition>
    );
};
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس زمینه یک ظاهر طراحی شده

Backdrop عنصری است که بین محتوای اصلی و عنصر مدال رندر شده است. ما باید کلاس های Tailwind CSS زیر را به آن ارائه دهیم:

fixed: موقعیت را تنظیم می کند: ثابت.
inset-0: میانبر CSS برای بالا، راست، چپ، پایین: 0;
bg-gray-300/30: رنگ پس زمینه و کدورت را تنظیم می کند.
backdrop-blur-sm: محتوای اصلی را محو می کند.

نسخه ی نمایشی کامل

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا