شرح صفوف ومحتوى الفقرة
لفتح لوحة جانبية تلقائياً بعد إضافة منتج إلى السلة بطلب fetch دون اشتراط نقر زر تصريحي، استخرج نسخة المكوّن عبر bootstrap.Offcanvas.getOrCreateInstance(el) واستدعِ .show() أو .hide() أو .toggle().
كما يمكنك ربط منطق التحميل الكسول للبيانات بحدث show.bs.offcanvas أو وضع التركيز داخل حقل البحث فور اكتمال الانزلاق عبر الحدث shown.bs.offcanvas:
<button id="jsCartBtn" class="btn btn-success"
type="button">Add Item & Open</button>
<div class="offcanvas offcanvas-end" tabindex="-1"
id="jsDrawer" aria-labelledby="jsLbl">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="jsLbl">Search</h5>
<button class="btn-close" data-bs-dismiss="offcanvas">
</button></div>
<div class="offcanvas-body">
<input id="qIn" class="form-control"></div>
</div>مرجع كلاسات وسمات مكوّن Offcanvas
| الكلاس / السمة | العنصر | السلوك الوظيفي في Bootstrap 5.3 |
|---|---|---|
.offcanvas-start / -end | حاوية اللوحة | تحدد جهة الانزلاق المنطقية المتكيفة مع RTL وLTR. |
.offcanvas-top / -bottom | حاوية اللوحة | تنشئ لوحة عريضة تنزلق من أعلى أو أسفل النافذة. |
.offcanvas-lg | حاوية متجاوبة | تظهر كدرج منزلق تحت 992px وكعنصر ثابت بالحاسوب. |
data-bs-scroll="true" | حاوية اللوحة | تسمح بتمرير محتوى الصفحة الأصلي أثناء بقاء اللوحة مفتوحة. |
data-bs-backdrop="static" | حاوية اللوحة | تمنع إغلاق اللوحة عند النقر الخارجي على طبقة التعتيم. |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس تشريح مكوّن Offcanvas، ومواضعه الأربعة المنطقية، وضبط تمرير الخلفية وتثبيتها عبر data-bs-scroll وdata-bs-backdrop="static"، وبناء اللوحات المتجاوبة .offcanvas-lg مع حصر التركيز والتحكم البرمجي بـ bootstrap.Offcanvas. الخطوة التالية: انتقل الآن إلى درس النوافذ الحوارية Modals لإتقان نوافذ التأكيد والنماذج المنبثقة وتمرير البيانات الديناميكية.