ئۆفکانڤاس
بە چەند پۆلێک و پێوەکراوەکەی جاڤاسکڕێپتەکەمان، لایەنی شاراوە دروست بکە بۆ ناو پڕۆژەکەت بۆ گەشتکردن، سەبەتەی کڕین و زۆر شتی تر.
چۆن کاردەکات
Offcanvas پێکهاتەیەکی لایەنی پەنجەرە کە دەتوانرێت لە ڕێگەی جاڤاسکڕێپتەوە بگۆڕدرێت بۆ ئەوەی لە لێواری چەپ، ڕاست، یان خوارەوەی دەرچەی بینینەکە دەربکەوێت. دوگمە یان ئەنکر وەکو تریگەر بەکاردەهێنرێت کە بە توخمە تایبەتەکانەوە دەبەسترێتەوە کە تۆ دەیگۆڕیت، و data
تایبەتمەندییەکان بەکاردەهێنرێن بۆ بانگهێشتکردنی جاڤاسکڕێپتەکەمان.
- ئۆفکانڤاس هەندێک لە هەمان کۆدی جاڤاسکڕێپت وەک مۆداڵەکان هاوبەش دەکات. لە ڕووی چەمکییەوە تەواو لەیەک دەچن، بەڵام پێوەکراوەکانی جیاوازن.
- بە هەمان شێوە هەندێک لە گۆڕاوە سەرچاوەییەکانی Sass بۆ ستایل و ڕەهەندەکانی ئۆفکانڤاس لە گۆڕاوەکانی مۆداڵەکەوە بە میرات دەگیرێن.
- کاتێک پیشان دەدرێت، offcanvas باکگراوندێکی پێشوەختەی تێدایە کە دەتوانرێت کلیک لەسەر بکرێت بۆ شاردنەوەی offcanvas.
- هاوشێوەی مۆداڵەکان، دەتوانرێت لە یەک کاتدا تەنها یەک ئۆفکانڤاس پیشان بدرێت.
سەرەکان بەرز دەکەنەوە! بە سەرنجدان بەوەی چۆن CSS مامەڵە لەگەڵ ئەنیمەیشنەکان دەکات، ناتوانیت توخمێک بەکاربهێنیت margin
یان translate
لەسەری . .offcanvas
لەبری ئەوە پۆلەکە وەک توخمێکی پێچانی سەربەخۆ بەکاربهێنە.
prefers-reduced-motion
پرسیاری میدیایە. سەیری
بەشی جووڵەی کەمکراوە بکە لە بەڵگەنامەکانی دەستڕاگەیشتنمان .
نموونە
پێکهاتەکانی ئۆف کانڤاس
لە خوارەوە نموونەیەکی offcanvas کە بە شێوەی پێشوەختە نیشان دراوە (لە ڕێگەی .show
on .offcanvas
). ئۆفکانڤاس پشتگیری لە سەردێڕێک بە دوگمەی داخستنی و پۆلێکی جەستەی ئیختیاری بۆ هەندێک سەرەتایی لەخۆدەگرێت padding
. پێشنیار دەکەین کە هەرکاتێک بتوانیت سەردێڕی دەرەوەی کانڤاس لەگەڵ کردارەکانی ڕەتکردنەوەدا بخەیتە ناوەوە، یان کردارێکی ڕەتکردنەوەی ڕوون پێشکەش بکەیت.
ئۆفکانڤاس
<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>
دیمۆی ڕاستەوخۆ
دوگمەکانی خوارەوە بەکاربهێنە بۆ پیشاندانی و شاردنەوەی توخمێکی دەرەوەی کانڤاس لە ڕێگەی جاڤاسکڕێپتەوە کە .show
پۆلەکە لەسەر توخمێک لەگەڵ .offcanvas
پۆلەکەدا ��ەگۆڕێت.
.offcanvas
ناوەڕۆک دەشارێتەوە (بەپێی پێشوەختە).offcanvas.show
ناوەڕۆک نیشان دەدات
دەتوانیت بەستەرێک بەکاربهێنیت کە href
تایبەتمەندییەکەی تێدایە، یان دوگمەیەک بە data-bs-target
تایبەتمەندییەکە. لە هەردوو حاڵەتەکەدا، the data-bs-toggle="offcanvas"
is required.
ئۆفکانڤاس
<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-start
offcanvas لە لای چەپی دەرچەی بینینەکە دادەنێت (لە سەرەوە نیشان دراوە).offcanvas-end
ئۆف کانڤاس لە لای ڕاستی ڤیوپۆرتەکە دادەنێت.offcanvas-top
offcanvas لە سەرەوەی viewport دادەنێت.offcanvas-bottom
offcanvas لە خوارەوەی viewport دادەنێت
نموونەکانی سەرەوە و ڕاست و خوارەوە لە خوارەوە تاقی بکەرەوە.
سەرەوەی ئۆفکانڤاس
<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>
ئۆفکانڤاس ڕاستە
<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>
دەستڕاگەیشتن
بەو پێیەی پانێڵی ئۆف کانڤاس لە ڕووی چەمکییەوە دیالۆگێکی مۆداڵییە، دڵنیابە کە زیاد aria-labelledby="..."
دەکەیت — ئاماژەدان بە ناونیشانی ئۆف کانڤاس — بۆ .offcanvas
. تێبینی بکە پێویست ناکات زیاد بکەیت role="dialog"
لەبەر ئەوەی پێشتر لە ڕێگەی جاڤاسکڕێپتەوە زیادمان کردووە.
ساس
گۆڕاوەکان
$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.show
ناوەڕۆکەکەی نیشان دەدات.offcanvas-start
ئۆفکانڤاسەکە لە لای چەپەوە دەشارێتەوە.offcanvas-end
ئۆفکانڤاسەکە لە لای ڕاستەوە دەشارێتەوە.offcanvas-bottom
ئۆفکانڤاسەکە لە خوارەوە دەشارێتەوە
دوگمەی ڕەتکردنەوە زیاد بکە لەگەڵ data-bs-dismiss="offcanvas"
تایبەتمەندییەکە، کە کارایی جاڤاسکڕێپت دەستپێدەکات. دڵنیابە لە بەکارهێنانی <button>
توخمەکە لەگەڵیدا بۆ هەڵسوکەوتی دروست لە سەرانسەری هەموو ئامێرەکاندا.
لە ڕێگەی تایبەتمەندییەکانی داتا
تۆگڵ بکە
زیادکردن data-bs-toggle="offcanvas"
و a data-bs-target
یان href
بۆ توخمەکە بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کۆنترۆڵی یەک توخم لە دەرەوەی کانڤاس دیاری بکەیت. تایبەتمەندییەکە data-bs-target
هەڵبژێرەری CSS قبوڵ دەکات بۆ ئەوەی ئۆفکانڤاسەکەی لەسەر جێبەجێ بکات. دڵنیابە پۆلەکە زیاد بکە offcanvas
بۆ توخمە ئۆفکانڤاسەکە. ئەگەر دەتەوێت بە پێشوەختە بکرێتەوە، پۆلی زیادە زیاد بکە show
.
بەلاوە نان
دەتوانرێت دەرکردن بە data
تایبەتمەندی لەسەر دوگمەیەک لەناو ئۆفکانڤاسەکەدا بەدەست بهێنرێت وەک لە خوارەوە نیشان دراوە:
<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>
لە ڕێگەی جاڤاسکڕێپتەوە
بە دەست چالاک بکە لەگەڵ:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
بژاردەکان
دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-bs-
, وەک لە data-bs-backdrop=""
.
ناو | جۆر | بنەڕەتی | وەسف |
---|---|---|---|
backdrop |
boolean | true |
باکگراوندێک لەسەر جەستە دابنێ لەکاتێکدا ئۆفکانڤاس کراوە بێت |
keyboard |
boolean | true |
کاتێک کلیلی escape دەکرێتەوە offcanvas دادەخات |
scroll |
boolean | false |
ڕێگە بە سکڕۆڵی جەستە بدە لەکاتێکدا ئۆفکانڤاس کراوە بێت |
شێوازەکان
شێواز و گواستنەوە ناهاوسەنگەکان
هەموو شێوازەکانی API ناهاوسەنگن و دەست بە گواستنەوە دەکەن . هەر کە گواستنەوەکە دەستی پێکرد بەڵام پێش ئەوەی کۆتایی بێت دەگەڕێنەوە لای پەیوەندیکەرەکە . سەرەڕای ئەوە، بانگەوازێکی میتۆد لەسەر پێکهاتەیەکی گواستنەوە پشتگوێ دەخرێت .
ناوەڕۆکەکەت وەک توخمێکی دەرەوەی کانڤاس چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object
.
دەتوانیت بە بنیاتنان نموونەیەکی ئۆفکانڤاس دروست بکەیت، بۆ نموونە:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
ڕێگا | وەسف |
---|---|
toggle |
توخمێکی دەرەوەی کانڤاس دەگۆڕێت بۆ پیشاندانی یان شاراوە. دەگەڕێتەوە بۆ بانگکەر پێش ئەوەی توخمە ئۆفکانڤاسەکە لە ڕاستیدا پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.offcanvas یان hidden.bs.offcanvas ڕووبدات). |
show |
توخمێکی ئۆف کانڤاس نیشان دەدات. پێش ئەوەی توخمە ئۆفکانڤاسەکە بەڕاستی پیشان بدرێت دەگەڕێتەوە بۆ بانگکەر (واتە پێش ئەوەی shown.bs.offcanvas ڕووداوەکە ڕووبدات). |
hide |
توخمێکی ئۆف کانڤاس دەشارێتەوە. پێش ئەوەی توخمە ئۆفکانڤاسەکە لە ڕاستیدا بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.offcanvas ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ بانگکەر. |
getInstance |
شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی offcanvas بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە |
getOrCreateInstance |
شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی offcanvas بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە، یان یەکێکی نوێ دروست بکەیت لە ئەگەری دەستپێنەکردندا |
ڕووداوەکان
پۆلی ئۆف کانڤاسی بووتستراپ چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی ئۆف کانڤاس.
جۆری ڕووداو | وەسف |
---|---|
show.bs.offcanvas |
ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک show شێوازی نموونە بانگ دەکرێت. |
shown.bs.offcanvas |
ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی دەرەوەی کانڤاس بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات). |
hide.bs.offcanvas |
ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hide میتۆدەکە بانگ کراوە. |
hidden.bs.offcanvas |
ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی دەرەوەی کانڤاس لە بەکارهێنەر شاراوەتەوە (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})