انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 42
دورة بوتستراب 5

اللوحات الجانبية المنزلقة في بوتستراب 5Bootstrap 5 Offcanvas

أتقن بناء اللوحات الجانبية المنزلقة Offcanvas في بوتستراب 5 لسلات التسوق والفلاتر، وتعلّم مواضعها المنطقية الأربعة وخيارات التمرير والخلفية الثابتة واللوحات المتجاوبة عبر الشاشات وواجهة جافاسكريبت.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
1
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

Offcanvas Panel Anatomy تشريح اللوحات الجانبية المنزلقة

يُعدّ مكوّن Offcanvas أحد أبرز المكوّنات الجديدة كلياً التي قدّمها Bootstrap 5؛ فهو يوفّر لوحة جانبية مخفية خارج حدود الشاشة تنزلق بنعومة فوق الصفحة عند تفعيلها، مما يجعله الأداة القياسية لبناء قوائم الهواتف الجانبية، وسلات المشتريات الفورية، وأدراج تصفية المنتجات دون مغادرة الصفحة الحالية.

يتكوّن الهيكل القياسي من حاوية تحمل الكلاس .offcanvas مع كلاس موضع مثل .offcanvas-start، وبداخلها رأس .offcanvas-header يضم العنوان .offcanvas-title وزر الإغلاق .btn-close المزوّد بسمة data-bs-dismiss="offcanvas"، ثم منطقة المحتوى القابلة للتمرير .offcanvas-body.

HTML 
<button class="btn btn-primary" type="button"
  data-bs-toggle="offcanvas" data-bs-target="#cartBox">
  Open Cart</button>
<div class="offcanvas offcanvas-start" tabindex="-1"
  id="cartBox" aria-labelledby="cartLbl">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="cartLbl">Cart</h5>
    <button type="button" class="btn-close"
      data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">2 items ready.</div>
</div>
جرّب بنفسك

Four Offcanvas Placements مواضع الانزلاق الأربعة المنطقية

لا يفترض مكوّن .offcanvas موضعاً افتراضياً من تلقاء نفسه، بل يجب إرفاق أحد كلاسات الموضع الأربعة صراحةً: .offcanvas-start للانزلاق من بداية السطر (اليمين في العربية واليسار في الإنجليزية)، و.offcanvas-end للانزلاق من نهاية السطر، و.offcanvas-top من أعلى النافذة، و.offcanvas-bottom من أسفل الشاشة.

مخطط المواضع المنطقية الأربعة لمكوّن offcanvas وتكيف start وend مع الواجهة العربية
HTML 
<button class="btn btn-outline-primary" type="button"
  data-bs-toggle="offcanvas" data-bs-target="#endBox">
  End Drawer</button>
<div class="offcanvas offcanvas-end" tabindex="-1"
  id="endBox" aria-labelledby="endLbl">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="endLbl">Filters</h5>
    <button type="button" class="btn-close"
      data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">End panel content.</div>
</div>
جرّب بنفسك

Body Scroll and Backdrop تمرير الصفحة وتثبيت الخلفية

افتراضياً، ما إن تفتح لوحة Offcanvas حتى يجمد بوتستراب تمرير الصفحة الخلفية ويضع طبقة معتمة Backdrop تغلق اللوحة عند النقر عليها. إذا أردت السماح للمستخدم بمواصلة قراءة وتمرير جدول المنتجات خلف لوحة المقارنة المفتوحة، أضف السمة data-bs-scroll="true".

وإذا كانت اللوحة تحتوي نموذج إدخال تخشى ضياع بياناته بنقرة خاطئة على الخلفية، اضبط data-bs-backdrop="static" لمنع الإغلاق الخارجي، أو data-bs-backdrop="false" لإلغاء التعتيم تماماً.

HTML 
<div class="offcanvas offcanvas-start" id="statBox"
  data-bs-backdrop="static" data-bs-scroll="true"
  tabindex="-1" aria-labelledby="stLbl">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="stLbl">Draft</h5>
    <button type="button" class="btn-close"
      data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">Safe from misclicks!</div>
</div>
جرّب بنفسك

Responsive Offcanvas Menus اللوحات المتجاوبة عبر الشاشات

من أذكى مزايا الإصدار 5.2+ و5.3 عائلة الكلاسات المتجاوبة .offcanvas-sm وحتى .offcanvas-xxl (وأشهرها .offcanvas-lg)؛ فهي تحوّل الكتلة نفسها إلى درج منزلق مخفي على الشاشات الأصغر من lg، وتعرضها كقسم ثابت عادي داخل تخطيط الصفحة على شاشات الحاسوب دون الحاجة لتكرار عناصر HTML مرتين!

تذكر فقط إخفاء زر الفتح وزر الإغلاق على الشاشات الكبيرة بإضافة .d-lg-none وتمرير معرّف الهدف صراحةً على زر الإغلاق data-bs-target="#id".

مخطط تحول اللوحة المتجاوبة offcanvas-lg من درج منزلق بالهاتف إلى عمود ثابت بالحاسوب

Offcanvas Focus Accessibility حصر التركيز وإتاحة اللوحات

يطبق محرك Offcanvas مصيدة تركيز ذكية Focus Trap فور فتح اللوحة عندما تكون الخلفية مفعّلة؛ فينتقل مؤشر لوحة المفاتيح مباشرةً إلى داخل الدرج، ويدور مفتاح Tab بين أزرار وحقول اللوحة فقط دون التسرّب إلى الروابط المخفية خلف التعتيم.

احرص دائماً على وضع tabindex="-1" على حاوية .offcanvas، وربطها بعنوانها عبر aria-labelledby، وإضافة aria-label="Close" على زر .btn-close، وسيغلق مفتاح Escape اللوحة ويعيد التركيز للزر الأصلي بسلاسة.

Offcanvas JavaScript API إدارة اللوحات برمجياً بـ JS

لفتح لوحة جانبية تلقائياً بعد إضافة منتج إلى السلة بطلب fetch دون اشتراط نقر زر تصريحي، استخرج نسخة المكوّن عبر bootstrap.Offcanvas.getOrCreateInstance(el) واستدعِ .show() أو .hide() أو .toggle().

كما يمكنك ربط منطق التحميل الكسول للبيانات بحدث show.bs.offcanvas أو وضع التركيز داخل حقل البحث فور اكتمال الانزلاق عبر الحدث shown.bs.offcanvas:

HTML 
<button id="jsCartBtn" class="btn btn-success"
  type="button">Add Item &amp; 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 لإتقان نوافذ التأكيد والنماذج المنبثقة وتمرير البيانات الديناميكية.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 Offcanvas Drawer اللوحة الجانبية المنزلقة
مكوّن حديث في بوتستراب 5 يعرض لوحة منزلقة من أحد أطراف الشاشة الأربعة لبناء السلات والفلاتر والقوائم.
للمراجعة
02 Responsive Offcanvas اللوحة المنزلقة المتجاوبة
كلاسات متجاوبة تجعل العنصر ينزلق كدرج مخفي على شاشات الهاتف ويتحول إلى عمود ثابت ظاهر على شاشات الحاسوب.
للمراجعة
03 Focus Trap مصيدة حصر التركيز
آلية إتاحة تحصر تنقل مفتاح Tab داخل عناصر اللوحة المفتوحة وتمنع ضياع التركيز في الصفحة الخلفية المعتمة.
للمراجعة
04 Static Backdrop الخلفية المعتمة الثابتة
ضبط الخلفية بحيث لا يؤدي النقر خارج اللوحة إلى إغلاقها وفقدان البيانات المدخلة.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 RTL RTL
Right-to-Left
نمط الواجهة العربية الذي تنعكس فيه جهتا offcanvas-start وoffcanvas-end تلقائياً.
للمراجعة
02 ARIA ARIA
Accessible Rich Internet Applications
سمات الإتاحة القياسية التي تربط عنوان اللوحة وزر التشغيل بقارئات الشاشة.
للمراجعة
03 VH VH
Viewport Height
وحدة القياس النسبية لارتفاع الشاشة المستخدمة افتراضياً لضبط ارتفاع اللوحات العلوية والسفلية.
للمراجعة
04 API API
Application Programming Interface
الدوال البرمجية في كائن bootstrap.Offcanvas لفتح وإغلاق اللوحات من جافاسكريبت.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

  1. أنشئ زراً يفتح لوحة بالمعرّف miniCart تحمل كلاسي offcanvas وoffcanvas-end وتضم رأساً بعنوان وزر إغلاق btn-close وجسماً لعناصر السلة.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. اضبط لوحة offcanvas-start بسمتي data-bs-scroll="true" وdata-bs-backdrop="static"، ووجّه التركيز لحقل داخلي عند انطلاق الحدث shown.bs.offcanvas.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

8أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي8 أسئلة تنتظرك
01

أي كلاس موضع يجعل لوحة Offcanvas تنزلق من الحافة اليمنى في العربية ومن الحافة اليسرى في الإنجليزية؟

يمثل كلاس offcanvas-start بداية السطر المنطقية، فيفتح من اليمين بالعربية ومن اليسار بالإنجليزية.

02

ما السمة التي تسمح للمستخدم بمواصلة تمرير محتوى الصفحة الأساسي أثناء فتح لوحة Offcanvas؟

تلغي سمة data-bs-scroll="true" قفل التمرير الافتراضي على عنصر body أثناء عرض اللوحة.

03

كيف يتصرف الكلاس المتجاوب offcanvas-lg بين شاشات الهاتف وشاشات الحاسوب؟

تدمج كلاسات offcanvas المتجاوبة تجربة الدرج المنزلق للهاتف مع العرض الثابت للحاسوب بعنصر HTML واحد.

04

ما السمة التي توضع على زر btn-close داخل رأس اللوحة لإغلاقها تصريحياً دون كود إضافي؟

تربط سمة data-bs-dismiss="offcanvas" زر الإغلاق بحدث إخفاء اللوحة مباشرة.

05

يدعم بوتستراب 5 فتح عدة لوحات Offcanvas متراكبة فوق بعضها في الوقت نفسه.

يمنع بوتستراب تكديس اللوحات المنزلقة معاً ويغلق اللوحة المفتوحة تلقائياً قبل عرض لوحة أخرى.

06

ضبط سمة data-bs-backdrop="static" يمنع إغلاق اللوحة المنزلقة عند نقر المستخدم خارجها على الخلفية.

تحمي القيمة static اللوحة المفتوحة من الإغلاق العفوي عند النقر على المنطقة المعتمة المحيطة.

07

أي حدث هو الأنسب لاستدعاء دالة focus() على حقل بحث داخل لوحة Offcanvas؟

يضمن انتظار الحدث shown.bs.offcanvas اكتمال ظهور العنصر وانتهاء حركته فيقبل الحقل التركيز بلا تعارض.

08

يشترط كل مكوّن offcanvas تحديد كلاس موضع صريح مثل offcanvas-start أو end أو top أو bottom.

لا يفرض بوتستراب جهة افتراضية بدون كتابة أحد كلاسات الموضع الأربعة بجانب كلاس offcanvas.