bootstrap

Collapse در Bootstrap

Collapse در Bootstrap
14 مه

کامپوننت Collapse در Bootstrap یک پلاگین قدرتمند جاوااسکریپتی است که به شما امکان می‌دهد محتوای وب‌سایت خود را به صورت قابل کنترل پنهان یا نمایش دهید. این قابلیت، نیروی محرکه پشت آکاردئون‌ها است، اما کاربرد آن فراتر از گسترش عمودی ساده است. Collapse به شما اجازه می‌دهد تا عناصر تعاملی ایجاد کنید که اطلاعات اضافی، منوهای ناوبری یا هر محتوای پنهانی دیگر را به شکلی روان و کنترل‌شده نمایش دهند؛ تجربه کاربری را ارتقا داده و فضای صفحه را بهینه می‌سازند.

این راهنمای جامع، به بررسی عمیق Collapse در Bootstrap می‌پردازد و مفاهیم فنی، پیاده‌سازی‌های مختلف، تنظیمات پیشرفته، نکات دسترس‌پذیری، و استراتژی‌های خلاقانه برای نمایش کنترل‌شده‌ی محتوا را پوشش می‌دهد.

مکانیزم Toggle: ساختار و پیاده‌سازی

در هسته‌ی Collapse، دو عنصر کلیدی وجود دارد:

  • عنصر محرک (Trigger): معمولاً یک دکمه یا لینک است.
  • محتوای قابل جمع شدن (Collapsible Content): محتوایی که پنهان/نمایش داده می‌شود.

اتصالات این عناصر با ویژگی‌های HTML زیر انجام می‌شود:

عنصر محرک:

  • data-bs-toggle="collapse": مشخص می‌کند که این عنصر برای فعال‌سازی Collapse استفاده می‌شود.
  • data-bs-target="#yourCollapseId" یا href="#yourCollapseId": مشخص می‌کند کدام عنصر باید جمع یا باز شود.
  • aria-expanded="false" یا "true": وضعیت نمایانی کنونی را برای فناوری‌های کمکی مشخص می‌کند.
  • aria-controls="yourCollapseId": مشخص می‌کند که این عنصر محرک، کنترل کدام محتوای قابل جمع شدن را بر عهده دارد.

عنصر محتوای قابل جمع شدن:

  • id="yourCollapseId": شناسه‌ای که باید با data-bs-target یا href مطابقت داشته باشد.
  • کلاس .collapse: محتوای موردنظر را در ابتدا پنهان می‌کند.
  • کلاس .show (اختیاری): اگر استفاده شود، محتوا به صورت پیش‌فرض نمایش داده می‌شود.

مثال پایه:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Collapse</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Collapse</h2>
        <p>
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                Toggle Collapse
            </button>
        </p>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                This content is hidden by default but will be shown when the button above is clicked. You can include any HTML content here.
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

پیاده‌سازی‌های متنوع

Collapse در Bootstrap، پایه‌ی بسیاری از عناصر تعاملی است:

  • آکاردئون‌ها: پنل‌های محتوایی قابل گسترش به صورت عمودی. استفاده از data-bs-parent برای باز بودن تنها یک آیتم در هر زمان ضروری است.
  • منوهای موبایل: منوهای ناوبری که در صفحات کوچک به دکمه (منوی همبرگری) جمع می‌شوند.
  • لینک‌های «اطلاعات بیشتر»: برای نمایش توضیحات بیشتر و حفظ ظاهر ساده صفحه.
  • پنل‌های فیلتر: در فروشگاه‌ها یا اپ‌های داده‌محور برای فیلتر محتوا.
  • تنظیمات گروه‌بندی‌شده: جمع‌کردن تنظیمات پیچیده برای سهولت مدیریت.
  • پنل‌های کناری (Offcanvas): با اینکه Bootstrap کامپوننت خاص Offcanvas دارد، از Collapse نیز می‌توان برای پنل‌های ساده استفاده کرد.

گزینه‌های سفارشی‌سازی

Bootstrap انتقال‌های روان پیش‌فرض دارد، اما قابل تنظیم‌اند:

      .collapse.collapsing {
        height: 0; /* Initial state during transition */
        transition: height 0.5s ease-in-out; /* Custom transition */
      }
      .collapse.show {
        height: auto; /* Final expanded state */
        transition: height 0.5s ease-in-out; /* Consistent transition */
      }

ویژگی‌های پیشرفته

  • کنترل چند عنصر: یک محرک می‌تواند چند عنصر را با استفاده از چند ID در data-bs-target کنترل کند.
  • کنترل برنامه‌نویسی (JavaScript API):
    <script>
      var element = document.getElementById("collapseExample");
      var myCollapse = new bootstrap.Collapse(element);
      setTimeout(() => {
        myCollapse.hide();
      }, 3000);
    </script>
  • گزینه‌های پیکربندی:
    • toggle: true/false
    • parent: '#parentId' برای آکاردئون

نکات مربوط به دسترس‌پذیری (Accessibility)

  • از عنصر button برای تعامل استفاده کنید.
  • ویژگی aria-expanded را به‌درستی به‌روزرسانی کنید (Bootstrap این کار را خودکار انجام می‌دهد).
  • aria-controls باید با ID محتوای هدف تطابق داشته باشد.
  • قابلیت استفاده با کیبورد را فراهم کنید (Tab و Enter).
  • محتوای دکمه باید واضح باشد یا از aria-label برای دکمه‌های آیکون‌دار استفاده شود.
  • حالت فوکوس واضح ایجاد کنید.

استراتژی‌های خاص و نوآورانه

از Collapse تنها برای آکاردئون‌ها استفاده نکنید! موارد کاربردی دیگر:

  • آموزش‌های تعاملی گام‌به‌گام
  • فرم‌های پویا که بخش‌هایی بر اساس انتخاب کاربر نمایش می‌دهند
  • کمک‌های زمینه‌ای
  • نمایش جزئیات نمودارها یا داده‌ها
  • نمایش محتوای متحرک با ترکیب CSS Animation

بهترین شیوه‌ها

  • کاربری شهودی: دکمه‌ها یا لینک‌ها باید هدف خود را به‌روشنی بیان کنند.
  • سازگاری ظاهری: ظاهر محرک‌ها در کل سایت یکپارچه باشد.
  • کارایی: از جمع‌کردن حجم زیاد محتوا در Collapse خودداری کنید.
  • تست کامل: در مرورگرها و دستگاه‌های مختلف آزمایش کنید.
  • اولویت‌بندی دسترس‌پذیری: برای کاربران دارای معلولیت بهینه‌سازی شود.

نتیجه‌گیری

کامپوننت Collapse در Bootstrap یک ابزار منعطف و قدرتمند برای ایجاد نمایش محتوای پویا و تحت کنترل کاربر است. با درک درست از مکانیزم آن، بهره‌گیری از کاربردهای متنوع، و رعایت نکات دسترس‌پذیری، می‌توانید از محتوای ایستا فاصله گرفته و رابط‌هایی کاربرپسند، بهینه و تعاملی طراحی کنید.

جدیدتر Bootstrap dropdown: منوهای تعاملی و انعطاف‌پذیر
بازگشت به لیست
قدیمی تر اسلایدر بوت‌استرپ (Bootstrap Carousels)

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

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