ReactJS م Modلفه سفارشی با استفاده از قلاب و پورتال

عکس پروفایل CodeBucks Hacker Noon

@کدبانکCodeBucks

کمک به شما برای یادگیری کد! در اینجا می توانید آموزش های مربوط به توسعه وب را پیدا کنید. کدگذاری را ادامه دهید …

Modal یک عنصر مشترک UX است. modal یک پنجره گفتگوی / پنجره بازشو است که در بالای صفحه فعلی نمایش داده می شود. حتماً از پاپ آپ و اعلان ها برای وب سایت خود استفاده کرده اید. برای برخی از افراد پنجره های بازشو واقعاً آزار دهنده هستند 😫 اگر اینگونه رفتار نکنند. باید UI / UX خوبی داشته باشد.

در این مقاله ، ما قصد داریم یک کارآمد ایجاد کنیم جز Mod معین🤩 از ابتدا و بدون استفاده از کتابخانه.

Demo Link🖤: https://react-reusable-components.vercel.app/

هدف اصلی ما ایجاد یک روش کارآمد است که ،

  • چیدمان خوبی دارد
  • هنگام استفاده از سرریز در م parentلفه اصلی ، رابط کاربر شکسته نمی شود
  • می تواند محتوا را به صورت پویا ارائه دهد
  • انیمیشن تمیز و زیبا
  • خوب به نظر می رسد (رابط کاربری خوب)
  • کنترل بیشتری برای کاربر داشته باشید (مانند کلیک کردن روی قسمت بیرونی می توانید حالت بسته شود) و غیره

بیا شروع کنیم!

اگر قالب ویدیو را ترجیح می دهید ، می توانید این فیلم را تماشا کنید

https://www.youtube.com/watch؟v=5aG8peJsBVg

با استفاده از برنامه واکنش خود را ایجاد کنید ،

npx create-react-app react-modal

برای این آموزش ، من قصد دارم از آن استفاده کنم ساس بنابراین مطمئن شوید که بسته node-sass را نصب کرده اید. برای نصب آن ،

بیایید یک م Basicلفه Basic Modal ایجاد کنیم

پرونده App.js را باز کنید.

پاک کردن کد غیرضروری

اکنون یک دکمه در …