Offcanvas‌های Bootstrap 5

Offcanvas (پارچه)

Offcanvas مانند مدول (به صورت پیش‌فرض مخفی و در حالت فعال نمایش داده می‌شود) است، اما تفاوت‌های اصلی آن این است که معمولاً به عنوان منوی ناوبری جانبی استفاده می‌شود.

چگونه می‌توانید منوی جانبی Offcanvas ایجاد کنید

در اینجا نحوه ایجاد منوی جانبی offcanvas نمایش داده شده است:

مثال

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">عنوان</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>نوشته‌های مختلف. نوشته‌های مختلف. نوشته‌های مختلف.</p>
    <p>نوشته‌های مختلف. نوشته‌های مختلف. نوشته‌های مختلف.</p>
    <button class="btn btn-secondary" type="button">تبتی</button>
  </div>
</div>
<!-- دکمه باز کردن نوار کناری offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  باز کردن نوار کناری Offcanvas
</button>

آزمایش کنید

توضیحات مثال

.offcanvas کلاس برای ایجاد نوار کناری offcanvas استفاده می‌شود.

.offcanvas-start کلاس محل‌گذاری offcanvas را انجام می‌دهد و عرض آن را به 400px تنظیم می‌کند. برای اطلاعات بیشتری در مورد کلاس‌های محل‌گذاری، به مثال‌های زیر مراجعه کنید.

.offcanvas-title کلاس اطمینان حاصل کنید که حاشیه‌ها و ارتفاع خط‌ها مناسب است.

سپس، محتوای خود را به .offcanvas-body در این کلاس استفاده کنید.

برای باز کردن نوار کناری offcanvas، باید از <button> یا <a> عنصر به .offcanvas id محفظه (در مثال ما #demo()).

برای استفاده از <a> عنصر باز کردن نوار کناری offcanvas را می‌توانید با استفاده از ویژگی href به جای data-bs-target ویژگی به #demo.

محل‌گذاری Offcanvas

لطفاً از .offcanvas-start|end|top|bottom محل‌گذاری offcanvas را به سمت چپ، راست، بالا یا پایین قرار دهید:

مثال سمت راست

<div class="offcanvas offcanvas-end" id="demo">

آزمایش کنید

مثال بالا

<div class="offcanvas offcanvas-top" id="demo">

آزمایش کنید

مثال پایین

<div class="offcanvas offcanvas-bottom" id="demo">

آزمایش کنید