أوفاكانفاس
أنشئ أشرطة جانبية مخفية في مشروعك للتنقل وعربات التسوق والمزيد مع بعض الفئات ومكوِّن JavaScript الإضافي.
كيف تعمل
Offcanvas هو أحد مكونات الشريط الجانبي التي يمكن تبديلها عبر JavaScript لتظهر من الحافة اليسرى أو اليمنى أو السفلية لإطار العرض. تُستخدم الأزرار أو المراسي كمشغلات مرتبطة بعناصر محددة تقوم بتبديلها ، data
وتُستخدم السمات لاستدعاء JavaScript الخاص بنا.
- يشارك Offcanvas بعضًا من نفس كود JavaScript مثل الوسائط. من الناحية المفاهيمية ، هما متشابهان تمامًا ، لكنهما مكونات إضافية منفصلة.
- وبالمثل ، فإن بعض متغيرات مصدر Sass لأنماط وأبعاد offcanvas موروثة من متغيرات الوسائط.
- عند إظهارها ، تتضمن offcanvas خلفية افتراضية يمكن النقر عليها لإخفاء offcanvas.
- على غرار النماذج ، يمكن عرض فتحة واحدة فقط في كل مرة.
انتباه! بالنظر إلى كيفية تعامل CSS مع الرسوم المتحركة ، لا يمكنك استخدام عنصر margin
أو translate
عليه .offcanvas
. بدلاً من ذلك ، استخدم الفئة كعنصر التفاف مستقل.
prefers-reduced-motion
الاستعلام عن الوسائط. راجع
قسم الحركة المخفضة في وثائق إمكانية الوصول الخاصة بنا .
أمثلة
مكونات الأغطية
يوجد أدناه مثال offcanvas يتم عرضه افتراضيًا (عبر .show
on .offcanvas
). يتضمن Offcanvas دعمًا لرأس مع زر إغلاق وفئة جسم اختيارية لبعض الأحرف الأولية padding
. نقترح عليك تضمين عناوين offcanvas مع إجراءات الرفض كلما أمكن ذلك ، أو تقديم إجراء رفض صريح.
أوفاكانفاس
<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"
مطلوب.
أوفاكانفاس
<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">Backdroped 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 عددًا قليلاً من الفئات والسمات للتعامل مع الرفع الثقيل:
.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
.
عبر 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.offcanvas or ).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...
})