Bottom Sheet - سورس رایگان باتم شیت ساده

اگر با طراحی رابط کاربری سایت‌ها و اپلیکیشن‌های موبایلی سروکار داشته باشی، احتمالاً با چیزی به اسم Bottom Sheet برخورد کرده‌ای. Bottom Sheet همان پنلی است که معمولاً از قسمت پایین صفحه ظاهر می‌شود و می‌تواند اطلاعات، گزینه‌ها، منوها، فرم‌ها یا هر محتوای دیگری را داخل خودش نمایش دهد.

در این سورس از HTML، CSS و JavaScript خام استفاده کرده‌ایم تا یک Bottom Sheet ساده و زیبا بسازیم؛ بدون اینکه نیاز باشد سراغ کتابخانه‌هایی مثل Bootstrap، jQuery یا فریم‌ورک‌هایی مثل React برویم. بنابراین پروژه بسیار سبک است و می‌توانی خیلی راحت آن را در پروژه‌های مختلف خودت استفاده و شخصی‌سازی کنی. 🚀

🎯 این سورس دقیقاً چه کاری انجام می‌دهد؟

در صفحه اصلی پروژه یک رابط کاربری ساده قرار گرفته که کاربر می‌تواند با استفاده از آن Bottom Sheet را باز کند. هنگام باز شدن پنل، Bottom Sheet از قسمت پایین صفحه به سمت بالا حرکت می‌کند و محتوای آن در اختیار کاربر قرار می‌گیرد.

یکی از ویژگی‌های خوب این مدل طراحی این است که فضای زیادی از صفحه را اشغال نمی‌کند. به همین دلیل Bottom Sheet مخصوصاً در رابط‌های کاربری موبایل بسیار کاربردی است؛ جایی که صفحه نمایش کوچک است و نمی‌خواهیم برای نمایش یک منو یا چند گزینه، کاربر را به صفحه دیگری منتقل کنیم.

📁 ساختار فایل‌های پروژه

این سورس به صورت ساده و مرتب در چند فایل جدا شده است تا بتوانی راحت‌تر بخش‌های مختلف آن را بررسی و تغییر بدهی.

index.html — ساختار اصلی صفحه در این فایل قرار دارد. عناصر مربوط به دکمه، Bottom Sheet، محتوای داخل پنل و بخش‌های مورد نیاز رابط کاربری در HTML ساخته شده‌اند.

style.css — تمام ظاهر پروژه در این فایل کنترل می‌شود. اندازه‌ها، فاصله‌ها، موقعیت Bottom Sheet، انیمیشن‌ها، پس‌زمینه، لبه‌های گرد و سایر ویژگی‌های ظاهری از طریق CSS تنظیم شده‌اند.

script.js — بخش تعاملی پروژه در این فایل قرار دارد. JavaScript وظیفه دارد باز و بسته شدن Bottom Sheet و تغییر وضعیت عناصر مختلف صفحه را کنترل کند.

🧱 بخش HTML چگونه ساخته شده است؟

اولین بخش پروژه مربوط به ساختار صفحه است. HTML مشخص می‌کند که چه عناصری باید روی صفحه وجود داشته باشند و هر قسمت چه نقشی دارد.

در چنین پروژه‌ای معمولاً یک دکمه یا عنصر تعاملی برای باز کردن Bottom Sheet داریم. بعد از آن خود پنل ساخته می‌شود و داخل آن می‌توان محتوای دلخواه قرار داد.

مزیت جدا کردن ساختار از استایل این است که اگر بعداً بخواهی محتوای پنل را تغییر بدهی، لازم نیست CSS یا JavaScript را از اول بنویسی. کافی است HTML مربوط به محتوای Bottom Sheet را تغییر بدهی.

همچنین می‌توانی داخل Bottom Sheet تقریباً هر چیزی قرار بدهی؛ از متن و تصویر گرفته تا دکمه، فرم ورود، تنظیمات کاربر، لیست گزینه‌ها، منوی برنامه یا حتی اطلاعات یک محصول.

🎨 نقش CSS در پروژه

قسمت مهمی از جذابیت Bottom Sheet به CSS مربوط می‌شود. اگر فقط یک div ساده در پایین صفحه قرار بدهیم، تجربه کاربری چندان جالبی نخواهد داشت. بنابراین باید با CSS کاری کنیم که پنل ظاهر یک بخش واقعی از رابط کاربری را داشته باشد.

در این پروژه برای Bottom Sheet ویژگی‌هایی مانند موقعیت قرارگیری، اندازه، فاصله داخلی، شکل گوشه‌ها و انیمیشن در نظر گرفته شده است. یکی از نکات مهم نیز این است که پنل در پایین صفحه قرار می‌گیرد و در زمان تغییر وضعیت، با یک حرکت نرم وارد صفحه می‌شود.

استفاده از transition و ویژگی‌های حرکتی CSS باعث می‌شود تغییر وضعیت پنل ناگهانی نباشد. در نتیجه وقتی کاربر روی دکمه کلیک می‌کند، پنل به صورت نرم و طبیعی ظاهر می‌شود.

همچنین می‌توانی با تغییر مقادیر موجود در CSS ظاهر پروژه را کاملاً عوض کنی. برای مثال می‌توانی رنگ پس‌زمینه، میزان گرد بودن گوشه‌ها، اندازه پنل، سرعت انیمیشن و فاصله محتوا را تغییر بدهی.

⚡ نقش JavaScript در Bottom Sheet

HTML به تنهایی نمی‌تواند یک Bottom Sheet تعاملی بسازد؛ چون باید بتوانیم با کلیک کاربر وضعیت پنل را تغییر دهیم. این قسمت بر عهده JavaScript است.

در فایل script.js رویدادهای لازم برای تعامل با صفحه تعریف شده‌اند. زمانی که کاربر دکمه مربوط به Bottom Sheet را انتخاب می‌کند، JavaScript کلاس یا وضعیت مورد نیاز را تغییر می‌دهد تا پنل از حالت بسته به حالت باز منتقل شود.

به همین شکل، هنگام بستن پنل نیز وضعیت آن تغییر می‌کند و Bottom Sheet دوباره به قسمت پایین صفحه برمی‌گردد.

این روش یکی از ساده‌ترین روش‌ها برای ساخت کامپوننت‌های تعاملی در JavaScript است. به جای استفاده از یک کتابخانه بزرگ، تنها با چند رویداد و تغییر کلاس‌های CSS می‌توانیم یک رابط کاربری کاربردی بسازیم.

📱 چرا Bottom Sheet برای موبایل مناسب است؟

یکی از دلایل محبوبیت Bottom Sheet این است که برای صفحه‌های کوچک بسیار مناسب است. در موبایل معمولاً فضای کافی برای نمایش منوها و پنجره‌های بزرگ نداریم. Bottom Sheet می‌تواند بخشی از صفحه را در اختیار بگیرد و بعد از اینکه کاربر کارش تمام شد، دوباره بسته شود.

این نوع رابط کاربری را می‌توانی در اپلیکیشن‌های مختلف ببینی. مثلاً وقتی روی یک دکمه کلیک می‌کنی و از پایین صفحه گزینه‌هایی مثل «اشتراک‌گذاری»، «حذف»، «ویرایش» یا «تنظیمات» ظاهر می‌شوند، احتمال زیادی دارد که آن رابط با Bottom Sheet ساخته شده باشد.

در پروژه‌های وب نیز می‌توان از همین تکنیک استفاده کرد تا نسخه موبایل سایت تجربه کاربری بهتری داشته باشد.

🖥️ استفاده در دسکتاپ

هرچند Bottom Sheet بیشتر در طراحی موبایل دیده می‌شود، اما محدود به موبایل نیست. با CSS مناسب می‌توان آن را روی دسکتاپ نیز نمایش داد.

در یک سایت دسکتاپی می‌توان از این پنل برای نمایش فرم ورود، اطلاعات بیشتر، تنظیمات، اعلان‌ها یا حتی یک منوی کوچک استفاده کرد. نکته مهم این است که طراحی را طوری انجام بدهی که اندازه پنل در صفحه‌های مختلف مناسب باقی بماند.

📐 واکنش‌گرایی یا Responsive Design

یکی از نکاتی که هنگام ساخت رابط‌های کاربری امروزی باید به آن توجه کنی، واکنش‌گرا بودن صفحه است. کاربر ممکن است سایت را با یک گوشی کوچک، تبلت، لپ‌تاپ یا مانیتور بزرگ باز کند.

متاسفانه این سورس در این بخش خوب نیست. به همین دلیل می‌توانی در CSS از واحدهایی مانند %، vw و vh و همچنین Media Queryها استفاده کنی تا ظاهر پنل در اندازه‌های مختلف صفحه بهتر شود.

برای مثال می‌توانی تعیین کنی Bottom Sheet در موبایل تقریباً بیشتر صفحه را بگیرد، اما در دسکتاپ ارتفاع آن کمتر باشد. این موضوع باعث می‌شود رابط کاربری پروژه حرفه‌ای‌تر به نظر برسد.

🧩 چه چیزهایی می‌توانیم داخل Bottom Sheet قرار دهیم؟

یکی از خوبی‌های این کامپوننت انعطاف‌پذیری بالای آن است. لازم نیست Bottom Sheet فقط یک متن ساده نمایش دهد. می‌توانی محتوای آن را بر اساس نیاز پروژه تغییر بدهی.

• 📋 منوی گزینه‌ها
• ⚙️ تنظیمات کاربر
• 🔐 فرم ورود یا ثبت‌نام
• 📝 فرم ارسال اطلاعات
• 🖼️ گالری تصاویر
• 📄 نمایش اطلاعات بیشتر
• 🛒 اطلاعات سبد خرید
• 🔗 گزینه‌های اشتراک‌گذاری
• ⚠️ نمایش هشدار یا پیام تأیید
• 👤 اطلاعات حساب کاربری

مثلاً اگر یک فروشگاه اینترنتی داشته باشی، می‌توانی بعد از کلیک روی دکمه «فیلترها»، یک Bottom Sheet باز کنی و فیلترهای محصولات را داخل آن قرار بدهی. در موبایل این روش خیلی بهتر از این است که کاربر را به یک صفحه کاملاً جدا منتقل کنیم.

🎨 شخصی‌سازی ظاهر

یکی از قسمت‌های جذاب این سورس این است که تغییر دادن ظاهر آن کار سختی نیست. اگر با CSS آشنا باشی، می‌توانی تقریباً تمام بخش‌های ظاهری پروژه را مطابق سلیقه خودت تغییر بدهی.

برای مثال می‌توانی رنگ پنل را تغییر بدهی، گوشه‌های آن را گردتر یا صاف‌تر کنی، سایه اضافه کنی یا حتی یک طراحی کاملاً شیشه‌ای برای آن بسازی.

همچنین می‌توانی انیمیشن باز شدن پنل را تغییر بدهی. مثلاً به جای حرکت ساده از پایین به بالا، از ترکیب transform و opacity استفاده کنی تا پنل همزمان با حرکت، به آرامی ظاهر شود.

💡 ایده‌هایی برای ارتقای پروژه

این نسخه یک پایه خوب برای یادگیری Bottom Sheet است، اما می‌توانی امکانات خیلی بیشتری به آن اضافه کنی.

یکی از جذاب‌ترین قابلیت‌ها، امکان Drag کردن Bottom Sheet است. یعنی کاربر بتواند با موس یا انگشت پنل را بگیرد و آن را به سمت بالا یا پایین بکشد. این قابلیت باعث می‌شود Bottom Sheet بیشتر شبیه نمونه‌هایی شود که در اپلیکیشن‌های حرفه‌ای موبایل می‌بینیم.

همچنین می‌توانی چند حالت ارتفاع برای پنل ایجاد کنی. مثلاً Bottom Sheet ابتدا با ارتفاع کم باز شود و کاربر بتواند آن را تا نیمه صفحه یا تمام صفحه بالا بکشد.

قابلیت دیگری که می‌توانی اضافه کنی، بستن پنل با فشردن کلید Escape در دسکتاپ است. این کار تجربه کاربری را بهتر می‌کند و باعث می‌شود کاربر روش دیگری برای بستن پنل داشته باشد.

🧠 نکات آموزشی مهم این سورس

اگر تازه وارد دنیای طراحی وب شده‌ای، این پروژه می‌تواند چند مفهوم مهم را به صورت عملی به تو یاد بدهد. در HTML با ساختار دادن به عناصر صفحه کار می‌کنی، در CSS موقعیت و ظاهر عناصر را کنترل می‌کنی و در JavaScript رفتار تعاملی صفحه را می‌سازی.

همچنین با مفاهیمی مثل Event Listener، Class، CSS Transition، Position، Transform و Responsive Design بیشتر آشنا می‌شوی.

نکته مهم این است که برای یادگیری این مفاهیم لازم نیست یک پروژه بسیار بزرگ بسازی. گاهی یک کامپوننت کوچک مثل همین Bottom Sheet می‌تواند مفاهیم زیادی را به شکل عملی به تو آموزش بدهد.

محدودیت‌ها

این نسخه فاقد قابلیت کشیدن (Drag)، پشتیبانی از تاچ و تنظیم ارتفاع پویا است و برای استفاده جدی نیاز به بهبود دارد.

🚀 اجرای پروژه

برای اجرای سورس نیازی به نصب Node.js، npm یا هیچ کتابخانه خاصی نداری. کافی است فایل‌های پروژه را در یک پوشه قرار بدهی و فایل index.html را با مرورگر باز کنی.

اگر از VS Code استفاده می‌کنی، می‌توانی پروژه را داخل آن باز کنی و با افزونه‌هایی مانند Live Server صفحه را اجرا کنی. البته برای اجرای ساده پروژه حتی این کار هم ضروری نیست و مرورگر به تنهایی کافی است.

🔧 پیش‌نیازها

برای استفاده از این سورس تنها داشتن یک مرورگر جدید و یک ویرایشگر کد کافی است. هیچ کتابخانه خارجی یا سرویس خاصی در پروژه استفاده نشده است.

دانستن مبانی HTML، CSS و JavaScript کمک می‌کند راحت‌تر کد را متوجه شوی، اما حتی اگر تازه در حال یادگیری این زبان‌ها هستی، می‌توانی فایل‌ها را باز کنی و بخش‌های مختلف آن را بررسی کنی.

📌 جمع‌بندی

در این سورس یک نمونه کاربردی از Bottom Sheet با استفاده از تکنولوژی‌های پایه وب ساخته شده است. پروژه سبک، ساده و قابل توسعه است و می‌توانی از ساختار آن در پروژه‌های شخصی، سایت‌ها و حتی پروژه‌های آموزشی خودت استفاده کنی.

اگر قصد داری طراحی رابط کاربری وب را یاد بگیری، ساخت کامپوننت‌هایی مثل Bottom Sheet تمرین خیلی خوبی است؛ چون همزمان با HTML، CSS و JavaScript سروکار پیدا می‌کنی و نتیجه کار را هم بلافاصله در مرورگر می‌بینی. 😎

پس پیشنهاد می‌کنم فقط سورس را اجرا نکنی؛ کدهای index.html، style.css و script.js را باز کن، بخش‌های مختلف را تغییر بده و ببین هر تغییر چه اثری روی پروژه می‌گذارد. همین آزمایش‌های کوچک یکی از بهترین راه‌ها برای قوی شدن در برنامه‌نویسی است. 💻🔥

میتونی همین الان این سورس رو به صورت رایگان دانلود و استفاده کنی!