تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

أوفاكانفاس

أنشئ أشرطة جانبية مخفية في مشروعك للتنقل وعربات التسوق والمزيد مع بعض الفئات ومكوِّن JavaScript الإضافي.

كيف تعمل

Offcanvas هو أحد مكونات الشريط الجانبي التي يمكن تبديلها عبر JavaScript لتظهر من الحافة اليسرى أو اليمنى أو السفلية لإطار العرض. تُستخدم الأزرار أو المراسي كمشغلات مرتبطة بعناصر محددة تقوم بتبديلها ، dataوتُستخدم السمات لاستدعاء JavaScript الخاص بنا.

  • يشارك Offcanvas بعضًا من نفس كود JavaScript مثل الوسائط. من الناحية المفاهيمية ، هما متشابهان تمامًا ، لكنهما مكونات إضافية منفصلة.
  • وبالمثل ، فإن بعض متغيرات مصدر Sass لأنماط وأبعاد offcanvas موروثة من متغيرات الوسائط.
  • عند إظهارها ، تتضمن offcanvas خلفية افتراضية يمكن النقر عليها لإخفاء offcanvas.
  • على غرار النماذج ، يمكن عرض فتحة واحدة فقط في كل مرة.

انتباه! بالنظر إلى كيفية تعامل CSS مع الرسوم المتحركة ، لا يمكنك استخدام عنصر marginأو translateعليه .offcanvas. بدلاً من ذلك ، استخدم الفئة كعنصر التفاف مستقل.

يعتمد تأثير الرسوم المتحركة لهذا المكون على prefers-reduced-motionالاستعلام عن الوسائط. راجع قسم الحركة المخفضة في وثائق إمكانية الوصول الخاصة بنا .

أمثلة

مكونات الأغطية

يوجد أدناه مثال offcanvas يتم عرضه افتراضيًا (عبر .showon .offcanvas). يتضمن Offcanvas دعمًا لرأس مع زر إغلاق وفئة جسم اختيارية لبعض الأحرف الأولية padding. نقترح عليك تضمين عناوين offcanvas مع إجراءات الرفض كلما أمكن ذلك ، أو تقديم إجراء رفض صريح.

أوفاكانفاس
هنا يتم عرض المحتوى الخاص بالفوهة. يمكنك وضع أي مكون Bootstrap أو عناصر مخصصة هنا.
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

عرض حي

استخدم الأزرار أدناه لإظهار وإخفاء عنصر offcanvas عبر JavaScript الذي يبدل .showالفئة في عنصر مع .offcanvasالفئة.

  • .offcanvasيخفي المحتوى (افتراضي)
  • .offcanvas.showيظهر المحتوى

يمكنك استخدام ارتباط مع hrefالسمة ، أو زر مع data-bs-targetالسمة. في كلتا الحالتين ، data-bs-toggle="offcanvas"مطلوب.

الارتباط مع href
أوفاكانفاس
بعض النص كعنصر نائب. في الحياة الواقعية ، يمكنك الحصول على العناصر التي اخترتها. مثل ، نص ، صور ، قوائم ، إلخ.
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

تحديد مستوى

لا يوجد موضع افتراضي لمكونات offcanvas ، لذلك يجب عليك إضافة أحد فئات المُعدِّل أدناه ؛

  • .offcanvas-startيضع offcanvas على يسار منفذ العرض (كما هو موضح أعلاه)
  • .offcanvas-endيضع offcanvas على يمين منفذ العرض
  • .offcanvas-topيضع offcanvas في الجزء العلوي من منفذ العرض
  • .offcanvas-bottomيضع offcanvas في الجزء السفلي من منفذ العرض

جرب الأمثلة العلوية واليمنى والسفلية أدناه.

أعلى أوفكانفاس
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas الحق
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
القاع المخفي
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

الخلفية

يتم تعطيل التمرير <body>للعنصر عندما تكون الفوهة وخلفيتها مرئية. استخدم data-bs-scrollالسمة لتبديل <body>التمرير data-bs-backdropوتبديل الخلفية.

ملون بالتمرير

حاول التمرير لبقية الصفحة لرؤية هذا الخيار أثناء العمل.

أوفكاناس مع خلفية

.....

الخلفية مع التمرير

حاول التمرير لبقية الصفحة لرؤية هذا الخيار أثناء العمل.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

إمكانية الوصول

نظرًا لأن لوحة offcanvas من الناحية المفاهيمية عبارة عن مربع حوار مشروط ، تأكد من إضافة aria-labelledby="...""الإشارة إلى عنوان offcanvas" إلى .offcanvas. لاحظ أنك لست بحاجة إلى الإضافة role="dialog"لأننا نضيفها بالفعل عبر JavaScript.

ساس

المتغيرات

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

إستعمال

يستخدم المكون الإضافي offcanvas عددًا قليلاً من الفئات والسمات للتعامل مع الرفع الثقيل:

  • .offcanvasيخفي المحتوى
  • .offcanvas.showيظهر المحتوى
  • .offcanvas-startيخفي الغطاء على اليسار
  • .offcanvas-endيخفي القناديل على اليمين
  • .offcanvas-bottomيخفي الغطاء الخارجي الموجود في الأسفل

أضف زر رفض مع data-bs-dismiss="offcanvas"السمة ، والتي تقوم بتشغيل وظيفة JavaScript. تأكد من استخدام <button>العنصر معه من أجل السلوك الصحيح عبر جميع الأجهزة.

عبر سمات البيانات

تبديل

إضافة data-bs-toggle="offcanvas"و a data-bs-targetأو hrefإلى العنصر لتعيين التحكم تلقائيًا في عنصر واحد offcanvas. تقبل السمة data-bs-targetمحدد CSS لتطبيق offcanvas عليه. تأكد من إضافة الفصل offcanvasإلى عنصر offcanvas. إذا كنت ترغب في فتحه افتراضيًا ، فأضف فئة إضافية show.

رفض

يمكن تحقيق الفصل من خلال dataالسمة الموجودة على زر داخل offcanvas كما هو موضح أدناه:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

أو على زر خارج الفانوس باستخدام ما data-bs-targetهو موضح أدناه:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
على الرغم من دعم كلتا الطريقتين لرفض أحد الأعمدة ، ضع في اعتبارك أن الرفض من الخارج لا يتطابق مع نمط تصميم مربع حوار مشروط WAI-ARIA . أفعل هذا على مسؤوليتك.

عبر JavaScript

التمكين يدويًا باستخدام:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-bs-، كما في data-bs-backdrop="".

اسم يكتب تقصير وصف
backdrop قيمة منطقية true ضع خلفية على الجسم أثناء فتح الغطاء
keyboard قيمة منطقية true يغلق الغطاء الخارجي عند الضغط على مفتاح الهروب
scroll قيمة منطقية false السماح بتمرير الجسم أثناء فتح الغطاء

طُرق

الطرق غير المتزامنة والانتقالات

جميع طرق API غير متزامنة وتبدأ في الانتقال . يعودون إلى المتصل بمجرد بدء الانتقال ولكن قبل أن ينتهي . بالإضافة إلى ذلك ، سيتم تجاهل استدعاء طريقة على مكون انتقالي .

راجع وثائق JavaScript الخاصة بنا للحصول على مزيد من المعلومات .

ينشط المحتوى الخاص بك كعنصر offcanvas. يقبل الخيارات الاختيارية object.

يمكنك إنشاء مثيل offcanvas باستخدام المُنشئ ، على سبيل المثال:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
طريقة وصف
toggle يبدل عنصر offcanvas لإظهاره أو إخفاؤه. يعود إلى المتصل قبل إظهار عنصر offcanvas بالفعل أو إخفاؤه (أي قبل وقوع الحدث shown.bs.offcanvasor ).hidden.bs.offcanvas
show يظهر عنصر offcanvas. يعود إلى المتصل قبل عرض عنصر offcanvas (أي قبل shown.bs.offcanvasوقوع الحدث).
hide يخفي عنصر offcanvas. يعود إلى المتصل قبل إخفاء عنصر offcanvas (أي قبل hidden.bs.offcanvasوقوع الحدث).
getInstance طريقة Static تسمح لك بالحصول على مثيل offcanvas المرتبط بعنصر DOM
getOrCreateInstance طريقة Static تتيح لك الحصول على مثيل offcanvas المرتبط بعنصر DOM ، أو إنشاء مثيل جديد في حالة عدم تهيئته

الأحداث

تعرض فئة offcanvas في Bootstrap بعض الأحداث للتثبيت في وظيفة offcanvas.

نوع الحدث وصف
show.bs.offcanvas يتم تشغيل هذا الحدث فورًا عند showاستدعاء أسلوب المثيل.
shown.bs.offcanvas يتم تشغيل هذا الحدث عندما يصبح عنصر offcanvas مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات CSS).
hide.bs.offcanvas يتم تشغيل هذا الحدث فورًا عند hideاستدعاء الأسلوب.
hidden.bs.offcanvas يتم تشغيل هذا الحدث عندما يتم إخفاء عنصر offcanvas عن المستخدم (سينتظر حتى تكتمل انتقالات CSS).
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})