Bootstrap 5 Offcanvas

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 معرف صندوق التكوين (في مثالنا هو #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">

جربها بنفسك