آف کانواس (Offcanvas)

آف کانواس یک پنل کناری پنهان است. با یک دکمه ظاهر می شود. مثل منوی کناری اپ ها. شبیه «مودال (Modal)» است، اما معمولا نقش منو دارد.

ساخت آف کانواس ساده

کلاس های .offcanvas و یکی از موقعیت ها را بده. سپس با یک دکمه و ویژگی های داده ای، آن را باز کن.

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Open Offcanvas Sidebar
</button>

مشاهده در ادیتور

جایگذاری آف کانواس

با کلاس های موقعیت، جهت بازشدن را تعیین کن: چپ، راست، بالا، پایین.

<div class="offcanvas offcanvas-end" id="demoright"></div>

مشاهده در ادیتور

<div class="offcanvas offcanvas-top" id="demotop"></div>

مشاهده در ادیتور

<div class="offcanvas offcanvas-bottom" id="demobottom"></div>

مشاهده در ادیتور

آف کانواس واکنش گرا

با کلاس های .offcanvas-sm|md|lg|xl|xxl مشخص کن از چه عرضی مخفی یا نمایان باشد.

<div class="offcanvas offcanvas-start offcanvas-lg" id="demo"></div>

مشاهده در ادیتور

آف کانواس تیره

برای پس زمینه تیره از .text-bg-dark استفاده کن. سپس برای دکمه بستن سفید، .btn-close-white را اضافه کن.

<div class="offcanvas offcanvas-start text-bg-dark" id="demodark">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

مشاهده در ادیتور

گام های عملی

1. یک ظرف با کلاس .offcanvas بساز.
2. موقعیت را با .offcanvas-start|end|top|bottom تعیین کن.
3. دکمه ای با data-bs-toggle="offcanvas" و هدف مناسب بساز.
4. در صورت نیاز، کلاس های واکنش گرا یا تیره را اضافه کن.

جمع بندی سریع

• آف کانواس منوی کناری سریع می سازد.
• با دکمه و data-* فعال می شود.
• جهت ها: چپ، راست، بالا، پایین.
• کلاس های واکنش گرا زمان نمایش را کنترل می کنند.

مطالب مرتبط: مودال (Modal)، اسکرول اسپای (Scrollspy).