BenoService

آکادمی بنو/آموزش Bootstrap

Modal، Offcanvas و Collapse در Bootstrap

بهنام نوبخت · ۱۴۰۵/۷/۱۲

در بسیاری از رابط‌های کاربری لازم نیست برای هر عملیات یک صفحه جدید ایجاد کنیم. گاهی بهتر است یک فرم، پیام، منوی جانبی یا بخشی از اطلاعات را بدون ترک صفحه فعلی به کاربر نمایش دهیم. برای مثال هنگام حذف یک محصول می‌توانیم یک پنجره تأیید باز کنیم، هنگام مشاهده جزئیات یک محصول اطلاعات آن را داخل یک پنجره بازشو نمایش دهیم، در موبایل می‌توانیم منوی اصلی را از کنار صفحه باز کنیم یا بخش‌هایی مانند توضیحات و سؤالات متداول را به صورت باز و بسته‌شونده نمایش دهیم. Bootstrap برای این نیازها سه کامپوننت مهم در اختیار ما قرار می‌دهد: Modal برای پنجره‌های بازشو، Offcanvas برای پنل‌هایی که از کنار یا جهت دیگری وارد صفحه می‌شوند و Collapse برای نمایش و مخفی کردن بخش‌های مختلف. هر سه کامپوننت به JavaScript Bootstrap وابسته‌اند و می‌توانند با Attributeهای data-bs-* یا API جاوااسکریپت کنترل شوند. در این مقاله ابتدا ساختار Modal را یاد می‌گیریم، سپس Offcanvas و Collapse را بررسی می‌کنیم و در پایان این سه کامپوننت را در سناریوهایی مانند حذف محصول، فرم ورود، Sidebar و FAQ به کار خواهیم برد.

Modal چیست؟

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

کاربردهای رایج Modal عبارت‌اند از:

  • تأیید حذف

  • فرم ورود

  • فرم ثبت‌نام

  • ویرایش اطلاعات

  • نمایش جزئیات

  • نمایش پیام مهم

  • انتخاب یک گزینه

  • نمایش اطلاعات محصول

ساختار ساده Modal:

<div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
>

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h1
                    class="modal-title fs-5"
                    id="exampleModalLabel"
                >
                    عنوان پنجره
                </h1>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="بستن"
                ></button>

            </div>

            <div class="modal-body">

                محتوای Modal در این قسمت قرار می‌گیرد.

            </div>

            <div class="modal-footer">

                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                >
                    بستن
                </button>

                <button
                    type="button"
                    class="btn btn-primary"
                >
                    ذخیره
                </button>

            </div>

        </div>

    </div>

</div>

اجزای Modal

Modal معمولاً از بخش‌های زیر تشکیل می‌شود:

کلاس

کاربرد

modal

Container اصلی

modal-dialog

تنظیم موقعیت و اندازه

modal-content

محتوای اصلی پنجره

modal-header

Header

modal-title

عنوان

modal-body

محتوای اصلی

modal-footer

Footer

ساختار آن را می‌توان به شکل زیر تصور کرد:

+--------------------------------+
| Modal Header              [X]  |
+--------------------------------+
|                                |
|          Modal Body            |
|                                |
|       Content / Form           |
|                                |
+--------------------------------+
|              [Cancel] [Save]   |
+--------------------------------+

باز کردن Modal با Button

یکی از ساده‌ترین روش‌ها استفاده از Attributeهای Bootstrap است:

<button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#exampleModal"
>
    باز کردن
</button>

در اینجا:

data-bs-toggle="modal"

مشخص می‌کند که Button باید یک Modal را کنترل کند.

و:

data-bs-target="#exampleModal"

مشخص می‌کند کدام Modal باید باز شود.

بستن Modal

می‌توانیم از:

data-bs-dismiss="modal"

استفاده کنیم:

<button
    type="button"
    class="btn btn-secondary"
    data-bs-dismiss="modal"
>
    بستن
</button>

همچنین دکمه Close در Header نیز معمولاً همین Attribute را دارد:

<button
    type="button"
    class="btn-close"
    data-bs-dismiss="modal"
    aria-label="بستن"
></button>

Modal کامل

یک مثال کامل:

<button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#productModal"
>
    مشاهده محصول
</button>

<div
    class="modal fade"
    id="productModal"
    tabindex="-1"
    aria-labelledby="productModalLabel"
    aria-hidden="true"
>

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h1
                    class="modal-title fs-5"
                    id="productModalLabel"
                >
                    اطلاعات محصول
                </h1>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="بستن"
                ></button>

            </div>

            <div class="modal-body">

                <h2 class="h5">
                    لپ‌تاپ حرفه‌ای
                </h2>

                <p>
                    این محصول مناسب برنامه‌نویسی و استفاده حرفه‌ای است.
                </p>

                <strong>
                    45,000,000 تومان
                </strong>

            </div>

            <div class="modal-footer">

                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                >
                    بستن
                </button>

                <button
                    type="button"
                    class="btn btn-primary"
                >
                    افزودن به سبد
                </button>

            </div>

        </div>

    </div>

</div>

اندازه Modal

Bootstrap اندازه‌های مختلفی برای Modal در اختیار ما قرار می‌دهد.

Modal کوچک

<div class="modal-dialog modal-sm">
    ...
</div>

Modal متوسط

اندازه پیش‌فرض:

<div class="modal-dialog">
    ...
</div>

Modal بزرگ

<div class="modal-dialog modal-lg">
    ...
</div>

Modal بسیار بزرگ

<div class="modal-dialog modal-xl">
    ...
</div>

انتخاب اندازه باید بر اساس محتوای Modal انجام شود.

Modal تمام‌صفحه

برای ایجاد Modal تمام‌صفحه:

<div class="modal-dialog modal-fullscreen">
    ...
</div>

Bootstrap همچنین حالت‌های Responsive برای Fullscreen دارد.

مثلاً:

<div class="modal-dialog modal-fullscreen-md-down">
    ...
</div>

یعنی Modal در اندازه md و پایین‌تر تمام صفحه شود.

این قابلیت برای فرم‌ها و صفحات موبایلی بسیار مفید است.

Modal عمودی در مرکز

به صورت پیش‌فرض Modal در موقعیت استاندارد خود قرار می‌گیرد.

می‌توان آن را به صورت عمودی نیز در مرکز قرار داد:

<div class="modal-dialog modal-dialog-centered">
    ...
</div>

این حالت برای پیام‌های تأیید یا Alertهای مهم بسیار مناسب است.

Modal قابل اسکرول

اگر محتوای Modal زیاد باشد، می‌توان آن را قابل اسکرول کرد:

<div class="modal-dialog modal-dialog-scrollable">
    ...
</div>

در این حالت Body مربوط به Modal قابلیت اسکرول پیدا می‌کند.

فرم داخل Modal

یکی از کاربردهای مهم Modal قرار دادن فرم داخل آن است:

<div class="modal-body">

    <form>

        <div class="mb-3">

            <label
                for="userName"
                class="form-label"
            >
                نام
            </label>

            <input
                type="text"
                id="userName"
                class="form-control"
            >

        </div>

        <div class="mb-3">

            <label
                for="userEmail"
                class="form-label"
            >
                ایمیل
            </label>

            <input
                type="email"
                id="userEmail"
                class="form-control"
            >

        </div>

    </form>

</div>

این روش برای فرم‌های سریع بسیار مناسب است.

Modal تأیید حذف

یکی از مهم‌ترین کاربردهای Modal در پنل مدیریت، تأیید عملیات حذف است.

<button
    type="button"
    class="btn btn-danger"
    data-bs-toggle="modal"
    data-bs-target="#deleteModal"
>
    حذف
</button>

<div
    class="modal fade"
    id="deleteModal"
    tabindex="-1"
    aria-labelledby="deleteModalLabel"
    aria-hidden="true"
>

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h1
                    class="modal-title fs-5"
                    id="deleteModalLabel"
                >
                    تأیید حذف
                </h1>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="بستن"
                ></button>

            </div>

            <div class="modal-body">

                آیا مطمئن هستید که می‌خواهید این محصول را حذف کنید؟

            </div>

            <div class="modal-footer">

                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                >
                    انصراف
                </button>

                <button
                    type="button"
                    class="btn btn-danger"
                >
                    حذف محصول
                </button>

            </div>

        </div>

    </div>

</div>

در یک پروژه واقعی، Button حذف باید پس از تأیید کاربر، API حذف را فراخوانی کند.

Modal با JavaScript

گاهی لازم است Modal را از طریق JavaScript کنترل کنیم.

ابتدا عنصر را دریافت می‌کنیم:

const modalElement =
    document.getElementById('exampleModal');

سپس یک Instance می‌سازیم:

const modal =
    new bootstrap.Modal(modalElement);

برای نمایش:

modal.show();

برای مخفی کردن:

modal.hide();

getOrCreateInstance

اگر نمی‌خواهیم Instance جدیدی ایجاد کنیم، می‌توانیم از:

const modal =
    bootstrap.Modal.getOrCreateInstance(
        modalElement
    );

استفاده کنیم.

سپس:

modal.show();

این روش در پروژه‌های بزرگ‌تر بسیار کاربردی است.

رویدادهای Modal

Bootstrap برای Modal رویدادهایی ارائه می‌دهد.

برای مثال:

const modalElement =
    document.getElementById('exampleModal');

modalElement.addEventListener(
    'shown.bs.modal',
    function () {

        console.log('Modal opened');

    }
);

برای زمانی که Modal کاملاً بسته شد:

modalElement.addEventListener(
    'hidden.bs.modal',
    function () {

        console.log('Modal closed');

    }
);

این رویدادها زمانی مفید هستند که بخواهیم بعد از باز یا بسته شدن Modal عملیات خاصی انجام دهیم.

Offcanvas چیست؟

Offcanvas پنلی است که معمولاً از کنار صفحه وارد می‌شود.

یکی از مهم‌ترین کاربردهای آن ایجاد Sidebar و منوی موبایل است.

ساختار ساده:

<div
    class="offcanvas offcanvas-start"
    tabindex="-1"
    id="menuOffcanvas"
    aria-labelledby="menuOffcanvasLabel"
>

    <div class="offcanvas-header">

        <h5
            class="offcanvas-title"
            id="menuOffcanvasLabel"
        >
            منو
        </h5>

        <button
            type="button"
            class="btn-close"
            data-bs-dismiss="offcanvas"
            aria-label="بستن"
        ></button>

    </div>

    <div class="offcanvas-body">

        محتوای منوی جانبی

    </div>

</div>

باز کردن Offcanvas

<button
    class="btn btn-primary"
    type="button"
    data-bs-toggle="offcanvas"
    data-bs-target="#menuOffcanvas"
>
    باز کردن منو
</button>

جهت Offcanvas

Bootstrap امکان مشخص کردن جهت Offcanvas را فراهم می‌کند.

از سمت Start

<div class="offcanvas offcanvas-start">
    ...
</div>

از سمت End

<div class="offcanvas offcanvas-end">
    ...
</div>

از بالا

<div class="offcanvas offcanvas-top">
    ...
</div>

از پایین

<div class="offcanvas offcanvas-bottom">
    ...
</div>

در صفحات RTL بهتر است از جهت‌های منطقی start و end استفاده کنیم، نه اینکه همیشه مفهوم آن‌ها را با left و right یکی بدانیم.

Offcanvas برای Sidebar

یک Sidebar ساده:

<div
    class="offcanvas offcanvas-start"
    tabindex="-1"
    id="sidebar"
>

    <div class="offcanvas-header">

        <h5 class="offcanvas-title">
            پنل مدیریت
        </h5>

        <button
            type="button"
            class="btn-close"
            data-bs-dismiss="offcanvas"
            aria-label="بستن"
        ></button>

    </div>

    <div class="offcanvas-body">

        <div class="list-group">

            <a
                href="#"
                class="list-group-item list-group-item-action active"
            >
                داشبورد
            </a>

            <a
                href="#"
                class="list-group-item list-group-item-action"
            >
                کاربران
            </a>

            <a
                href="#"
                class="list-group-item list-group-item-action"
            >
                محصولات
            </a>

            <a
                href="#"
                class="list-group-item list-group-item-action"
            >
                تنظیمات
            </a>

        </div>

    </div>

</div>

در این مثال Offcanvas و List Group با هم ترکیب شده‌اند.

Offcanvas در Navbar

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

<nav class="navbar navbar-expand-lg bg-body-tertiary">

    <div class="container">

        <a
            class="navbar-brand"
            href="#"
        >
            سایت من
        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="offcanvas"
            data-bs-target="#mobileMenu"
            aria-controls="mobileMenu"
            aria-label="باز کردن منو"
        >
            <span class="navbar-toggler-icon"></span>
        </button>

        <div
            class="offcanvas offcanvas-end"
            tabindex="-1"
            id="mobileMenu"
        >

            <div class="offcanvas-header">

                <h5 class="offcanvas-title">
                    منوی سایت
                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="offcanvas"
                    aria-label="بستن"
                ></button>

            </div>

            <div class="offcanvas-body">

                <ul class="navbar-nav">

                    <li class="nav-item">
                        <a
                            class="nav-link"
                            href="#"
                        >
                            خانه
                        </a>
                    </li>

                    <li class="nav-item">
                        <a
                            class="nav-link"
                            href="#"
                        >
                            محصولات
                        </a>
                    </li>

                    <li class="nav-item">
                        <a
                            class="nav-link"
                            href="#"
                        >
                            تماس با ما
                        </a>
                    </li>

                </ul>

            </div>

        </div>

    </div>

</nav>

این ساختار برای صفحات موبایل بسیار کاربردی است.

Collapse چیست؟

Collapse برای نمایش و مخفی کردن یک بخش از صفحه استفاده می‌شود.

برای مثال:

<a
    class="btn btn-primary"
    data-bs-toggle="collapse"
    href="#collapseExample"
    role="button"
    aria-expanded="false"
    aria-controls="collapseExample"
>
    نمایش اطلاعات
</a>

<div
    class="collapse mt-3"
    id="collapseExample"
>

    <div class="card card-body">

        این بخش با کلیک روی دکمه نمایش داده می‌شود.

    </div>

</div>

Collapse با Button

می‌توانیم به جای لینک از Button استفاده کنیم:

<button
    class="btn btn-primary"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#info"
    aria-expanded="false"
    aria-controls="info"
>
    نمایش اطلاعات
</button>

<div
    class="collapse mt-3"
    id="info"
>

    <div class="card card-body">
        اطلاعات بیشتر در این قسمت قرار دارد.
    </div>

</div>

مفهوم aria-expanded

Attribute زیر:

aria-expanded="false"

نشان می‌دهد بخش فعلاً بسته است.

وقتی باز شود، Bootstrap وضعیت آن را به:

aria-expanded="true"

تغییر می‌دهد.

این موضوع برای Accessibility اهمیت دارد.

چند Collapse

می‌توان چند بخش مستقل ایجاد کرد:

<button
    class="btn btn-primary"
    data-bs-toggle="collapse"
    data-bs-target="#sectionOne"
>
    بخش اول
</button>

<button
    class="btn btn-secondary"
    data-bs-toggle="collapse"
    data-bs-target="#sectionTwo"
>
    بخش دوم
</button>

<div
    class="collapse mt-3"
    id="sectionOne"
>
    <div class="card card-body">
        محتوای بخش اول
    </div>
</div>

<div
    class="collapse mt-3"
    id="sectionTwo"
>
    <div class="card card-body">
        محتوای بخش دوم
    </div>
</div>

Collapse افقی

Bootstrap امکان Collapse افقی را نیز فراهم می‌کند.

<div
    class="collapse collapse-horizontal"
    id="horizontalCollapse"
>

    <div
        class="card card-body"
        style="width: 300px;"
    >
        محتوای این بخش به صورت افقی باز و بسته می‌شود.
    </div>

</div>

برای باز کردن:

<button
    class="btn btn-primary"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#horizontalCollapse"
    aria-expanded="false"
>
    باز کردن
</button>

Accordion چیست؟

Accordion در واقع یک الگوی کاربردی مبتنی بر Collapse است که چند بخش را به صورت باز و بسته‌شونده مدیریت می‌کند.

ساختار ساده:

<div class="accordion" id="faqAccordion">

    <div class="accordion-item">

        <h2 class="accordion-header">

            <button
                class="accordion-button"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#questionOne"
                aria-expanded="true"
                aria-controls="questionOne"
            >
                Bootstrap چیست؟
            </button>

        </h2>

        <div
            id="questionOne"
            class="accordion-collapse collapse show"
            data-bs-parent="#faqAccordion"
        >

            <div class="accordion-body">

                Bootstrap یک Framework برای طراحی رابط کاربری وب است.

            </div>

        </div>

    </div>

    <div class="accordion-item">

        <h2 class="accordion-header">

            <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#questionTwo"
                aria-expanded="false"
                aria-controls="questionTwo"
            >
                آیا Bootstrap Responsive است؟
            </button>

        </h2>

        <div
            id="questionTwo"
            class="accordion-collapse collapse"
            data-bs-parent="#faqAccordion"
        >

            <div class="accordion-body">

                بله، Bootstrap ابزارهای مختلفی برای طراحی Responsive ارائه می‌کند.

            </div>

        </div>

    </div>

</div>

در مقالات بعدی کامپوننت Accordion را با جزئیات بیشتری بررسی خواهیم کرد.

تفاوت Modal، Offcanvas و Collapse

این سه کامپوننت کاربردهای متفاوتی دارند:

کامپوننت

کاربرد اصلی

Modal

پنجره بازشو روی صفحه

Offcanvas

پنل جانبی یا کشویی

Collapse

نمایش و مخفی کردن یک بخش

Accordion

چند Collapse مرتبط

به صورت مفهومی:

Modal
  ↓
Overlay Window

Offcanvas
  ↓
Sliding Panel

Collapse
  ↓
Expandable Content

استفاده از Modal برای نمایش جزئیات محصول

یک سناریوی واقعی:

<div class="card">

    <div class="card-body">

        <h5 class="card-title">
            گوشی هوشمند
        </h5>

        <p class="card-text">
            یک گوشی با امکانات مدرن.
        </p>

        <button
            type="button"
            class="btn btn-primary"
            data-bs-toggle="modal"
            data-bs-target="#productDetails"
        >
            جزئیات
        </button>

    </div>

</div>

<div
    class="modal fade"
    id="productDetails"
    tabindex="-1"
    aria-labelledby="productDetailsLabel"
    aria-hidden="true"
>

    <div class="modal-dialog modal-lg">

        <div class="modal-content">

            <div class="modal-header">

                <h5
                    class="modal-title"
                    id="productDetailsLabel"
                >
                    جزئیات گوشی هوشمند
                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="بستن"
                ></button>

            </div>

            <div class="modal-body">

                <p>
                    این قسمت می‌تواند شامل مشخصات کامل محصول باشد.
                </p>

                <ul>
                    <li>حافظه داخلی: 256GB</li>
                    <li>RAM: 8GB</li>
                    <li>نمایشگر: 6.5 inch</li>
                </ul>

            </div>

            <div class="modal-footer">

                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                >
                    بستن
                </button>

            </div>

        </div>

    </div>

</div>

استفاده از Collapse برای توضیحات بیشتر

گاهی لازم نیست Modal ایجاد کنیم.

مثلاً برای توضیحات:

<p>
    این محصول امکانات متعددی دارد.
</p>

<button
    class="btn btn-outline-primary"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#moreDescription"
    aria-expanded="false"
>
    توضیحات بیشتر
</button>

<div
    class="collapse mt-3"
    id="moreDescription"
>

    <p>
        این قسمت شامل توضیحات کامل‌تر محصول است.
        می‌توان اطلاعات بیشتری مانند مشخصات فنی،
        شرایط استفاده و اطلاعات تکمیلی را در این قسمت قرار داد.
    </p>

</div>

استفاده از Offcanvas برای فیلتر محصولات

در فروشگاه‌های آنلاین، مخصوصاً در موبایل، می‌توان فیلتر محصولات را داخل Offcanvas قرار داد:

<button
    class="btn btn-outline-primary"
    type="button"
    data-bs-toggle="offcanvas"
    data-bs-target="#filterPanel"
>
    فیلتر محصولات
</button>

<div
    class="offcanvas offcanvas-end"
    tabindex="-1"
    id="filterPanel"
>

    <div class="offcanvas-header">

        <h5 class="offcanvas-title">
            فیلتر محصولات
        </h5>

        <button
            type="button"
            class="btn-close"
            data-bs-dismiss="offcanvas"
            aria-label="بستن"
        ></button>

    </div>

    <div class="offcanvas-body">

        <h6>
            محدوده قیمت
        </h6>

        <input
            type="range"
            class="form-range"
        >

        <hr>

        <h6>
            دسته‌بندی
        </h6>

        <div class="form-check">

            <input
                class="form-check-input"
                type="checkbox"
                id="category1"
            >

            <label
                class="form-check-label"
                for="category1"
            >
                لپ‌تاپ
            </label>

        </div>

        <div class="form-check">

            <input
                class="form-check-input"
                type="checkbox"
                id="category2"
            >

            <label
                class="form-check-label"
                for="category2"
            >
                موبایل
            </label>

        </div>

    </div>

</div>

این الگو برای صفحات فروشگاهی Responsive بسیار کاربردی است.

نکات مهم در Modal

Modal را برای اطلاعات بسیار طولانی استفاده نکنید

اگر محتوا بسیار زیاد است، بهتر است صفحه یا بخش مستقل داشته باشیم.

Modal را بیش از حد تو در تو نکنید

باز کردن یک Modal از داخل Modal دیگر معمولاً تجربه کاربری مناسبی ایجاد نمی‌کند.

دکمه بستن را فراموش نکنید

کاربر باید همیشه راه واضحی برای خروج داشته باشد.

عنوان مناسب قرار دهید

Modalهای مهم بهتر است modal-title مشخص داشته باشند.

نکات مهم در Offcanvas

Offcanvas برای Sidebar و منو بسیار مناسب است.

در موبایل می‌توان منوی اصلی، فیلترها، تنظیمات یا سبد خرید را داخل آن قرار داد.

همچنین بهتر است محتوای Offcanvas بیش از حد زیاد نباشد.

نکات مهم در Collapse

Collapse برای محتوایی مناسب است که کاربر ممکن است همیشه به آن نیاز نداشته باشد.

نمونه‌های رایج:

  • توضیحات بیشتر

  • FAQ

  • جزئیات فنی

  • تنظیمات پیشرفته

  • فیلترهای قابل باز و بسته شدن

دسترس‌پذیری

هنگام استفاده از Modal، Offcanvas و Collapse باید به Accessibility توجه کنیم.

برای Modal:

aria-labelledby="exampleModalLabel"
aria-hidden="true"

برای دکمه کنترل Collapse:

aria-expanded="false"
aria-controls="info"

برای دکمه باز کردن Offcanvas:

aria-controls="menuOffcanvas"
aria-label="باز کردن منو"

این Attributeها به فناوری‌های کمکی کمک می‌کنند ساختار رابط کاربری را بهتر درک کنند.

بارگذاری JavaScript

Modal، Offcanvas و Collapse برای رفتار تعاملی خود به JavaScript Bootstrap نیاز دارند.

در صورت استفاده از CDN:

<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js">
</script>

قرار دادن bundle بسیار مهم است؛ زیرا Bootstrap Bundle شامل Popper نیز هست و برای برخی کامپوننت‌های تعاملی مورد نیاز است.

یک صفحه کامل عملی

در این مثال یک صفحه کوچک ایجاد می‌کنیم که هر سه کامپوننت را در خود دارد:

<!doctype html>

<html lang="fa" dir="rtl">

<head>

    <meta charset="utf-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
    >

    <title>
        Modal Offcanvas Collapse
    </title>

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
        rel="stylesheet"
    >

</head>

<body>

    <div class="container py-5">

        <h1 class="h3 mb-4">
            مدیریت محصولات
        </h1>

        <div class="d-flex gap-2 mb-4">

            <button
                class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#productModal"
            >
                افزودن محصول
            </button>

            <button
                class="btn btn-outline-secondary"
                data-bs-toggle="offcanvas"
                data-bs-target="#filterPanel"
            >
                فیلترها
            </button>

        </div>

        <div class="card">

            <div class="card-body">

                <h2 class="h5">
                    محصول نمونه
                </h2>

                <p>
                    توضیحات کوتاه محصول.
                </p>

                <button
                    class="btn btn-outline-primary"
                    data-bs-toggle="collapse"
                    data-bs-target="#productInfo"
                    aria-expanded="false"
                    aria-controls="productInfo"
                >
                    اطلاعات بیشتر
                </button>

                <div
                    class="collapse mt-3"
                    id="productInfo"
                >

                    <div class="card card-body">

                        قیمت:
                        25,000,000 تومان

                        <br>

                        وضعیت:
                        فعال

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div
        class="modal fade"
        id="productModal"
        tabindex="-1"
        aria-labelledby="productModalLabel"
        aria-hidden="true"
    >

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <h2
                        class="modal-title fs-5"
                        id="productModalLabel"
                    >
                        افزودن محصول
                    </h2>

                    <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="بستن"
                    ></button>

                </div>

                <div class="modal-body">

                    <form>

                        <div class="mb-3">

                            <label
                                for="productName"
                                class="form-label"
                            >
                                نام محصول
                            </label>

                            <input
                                type="text"
                                id="productName"
                                class="form-control"
                            >

                        </div>

                        <div class="mb-3">

                            <label
                                for="productPrice"
                                class="form-label"
                            >
                                قیمت
                            </label>

                            <input
                                type="number"
                                id="productPrice"
                                class="form-control"
                            >

                        </div>

                    </form>

                </div>

                <div class="modal-footer">

                    <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal"
                    >
                        انصراف
                    </button>

                    <button
                        type="button"
                        class="btn btn-primary"
                    >
                        ذخیره
                    </button>

                </div>

            </div>

        </div>

    </div>

    <div
        class="offcanvas offcanvas-end"
        tabindex="-1"
        id="filterPanel"
        aria-labelledby="filterPanelLabel"
    >

        <div class="offcanvas-header">

            <h2
                class="offcanvas-title fs-5"
                id="filterPanelLabel"
            >
                فیلتر محصولات
            </h2>

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="offcanvas"
                aria-label="بستن"
            ></button>

        </div>

        <div class="offcanvas-body">

            <div class="mb-3">

                <label
                    for="priceRange"
                    class="form-label"
                >
                    قیمت
                </label>

                <input
                    type="range"
                    class="form-range"
                    id="priceRange"
                >

            </div>

            <div class="form-check">

                <input
                    class="form-check-input"
                    type="checkbox"
                    id="available"
                >

                <label
                    class="form-check-label"
                    for="available"
                >
                    فقط محصولات موجود
                </label>

            </div>

        </div>

    </div>

    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
    ></script>

</body>

</html>

در این پروژه:

  • Modal برای افزودن محصول استفاده شده است.

  • Offcanvas برای فیلتر محصولات استفاده شده است.

  • Collapse برای نمایش اطلاعات بیشتر محصول استفاده شده است.

  • تمام بخش‌ها با Bootstrap RTL سازگار هستند.

  • Grid، Card، Form و Utilityهای Bootstrap نیز با این کامپوننت‌ها ترکیب شده‌اند.

تمرین عملی

یک صفحه مدیریت محصولات ایجاد کنید.

صفحه باید شامل موارد زیر باشد:

  1. لیست محصولات

  2. Button افزودن محصول

  3. Modal برای فرم افزودن

  4. Modal تأیید حذف

  5. Offcanvas برای فیلترها

  6. Collapse برای نمایش جزئیات بیشتر

  7. طراحی Responsive

  8. پشتیبانی RTL

ساختار کلی:

Product Management
|
+-- Add Product -> Modal
|
+-- Filters -> Offcanvas
|
+-- Product
|     |
|     +-- Details -> Collapse
|
+-- Delete -> Confirmation Modal

تمرین پیشرفته

یک پنل مدیریت فروشگاه طراحی کنید که در Desktop دارای Sidebar باشد و در Mobile Sidebar به شکل Offcanvas نمایش داده شود.

ساختار پیشنهادی:

Desktop
+-------------------------------+
| Sidebar |       Content       |
|         |                     |
|         |   Dashboard         |
|         |   Products          |
+-------------------------------+

Mobile
+-------------------------------+
| Menu Button                   |
+-------------------------------+
|                               |
|       Dashboard               |
|       Products                |
|                               |
+-------------------------------+

Menu Button
      |
      v
Offcanvas
      |
      v
Sidebar

همچنین برای عملیات زیر از Modal استفاده کنید:

  • افزودن محصول

  • ویرایش محصول

  • حذف محصول

و برای نمایش اطلاعات اضافی محصول از Collapse استفاده کنید.

جمع‌بندی

در این مقاله با سه کامپوننت بسیار مهم Bootstrap آشنا شدیم. Modal برای نمایش پنجره‌های بازشو و انجام عملیات‌هایی مانند افزودن، ویرایش، حذف، تأیید و نمایش جزئیات کاربرد دارد. یاد گرفتیم چگونه Modalهای کوچک، بزرگ، تمام‌صفحه، Centered و قابل اسکرول ایجاد کنیم و چگونه آن‌ها را با Button، Attributeهای data-bs-* و JavaScript کنترل کنیم. سپس Offcanvas را بررسی کردیم که برای Sidebar، منوی موبایل، فیلتر محصولات و پنل‌های جانبی بسیار مناسب است. همچنین یاد گرفتیم چگونه جهت Offcanvas را با start، end، top و bottom مشخص کنیم. در ادامه Collapse را یاد گرفتیم که برای نمایش و مخفی کردن محتوای اضافی کاربرد دارد و با آن می‌توان بخش‌هایی مانند توضیحات، تنظیمات پیشرفته و FAQ را ایجاد کرد. در نهایت این کامپوننت‌ها را با Card، List Group، Form و Responsive Design ترکیب کردیم. نکته مهم این است که انتخاب کامپوننت مناسب باید بر اساس نوع تعامل انجام شود: Modal برای پنجره‌های متمرکز، Offcanvas برای پنل‌های کشویی و Collapse برای محتوای قابل باز و بسته شدن.

۱۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.