باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

ئۆفکانڤاس

بە چەند پۆلێک و پێوەکراوەکەی جاڤاسکڕێپتەکەمان، لایەنی شاراوە دروست بکە بۆ ناو پڕۆژەکەت بۆ گەشتکردن، سەبەتەی کڕین و زۆر شتی تر.

چۆن کاردەکات

Offcanvas پێکهاتەیەکی لایەنی پەنجەرە کە دەتوانرێت لە ڕێگەی جاڤاسکڕێپتەوە بگۆڕدرێت بۆ ئەوەی لە لێواری چەپ، ڕاست، یان خوارەوەی دەرچەی بینینەکە دەربکەوێت. دوگمە یان ئەنکر وەکو تریگەر بەکاردەهێنرێت کە بە توخمە تایبەتەکانەوە دەبەسترێتەوە کە تۆ دەیگۆڕیت، و dataتایبەتمەندییەکان بەکاردەهێنرێن بۆ بانگهێشتکردنی جاڤاسکڕێپتەکەمان.

  • ئۆفکانڤاس هەندێک لە هەمان کۆدی جاڤاسکڕێپت وەک مۆداڵەکان هاوبەش دەکات. لە ڕووی چەمکییەوە تەواو لەیەک دەچن، بەڵام پێوەکراوەکانی جیاوازن.
  • بە هەمان شێوە هەندێک لە گۆڕاوە سەرچاوەییەکانی Sass بۆ ستایل و ڕەهەندەکانی ئۆفکانڤاس لە گۆڕاوەکانی مۆداڵەکەوە بە میرات دەگیرێن.
  • کاتێک پیشان دەدرێت، offcanvas باکگراوندێکی پێشوەختەی تێدایە کە دەتوانرێت کلیک لەسەر بکرێت بۆ شاردنەوەی offcanvas.
  • هاوشێوەی مۆداڵەکان، دەتوانرێت لە یەک کاتدا تەنها یەک ئۆفکانڤاس پیشان بدرێت.

سەرەکان بەرز دەکەنەوە! بە سەرنجدان بەوەی چۆن CSS مامەڵە لەگەڵ ئەنیمەیشنەکان دەکات، ناتوانیت توخمێک بەکاربهێنیت marginیان translateلەسەری . .offcanvasلەبری ئەوە پۆلەکە وەک توخمێکی پێچانی سەربەخۆ بەکاربهێنە.

کاریگەری ئەنیمەیشنی ئەم پێکهاتەیە وابەستەی prefers-reduced-motionپرسیاری میدیایە. سەیری بەشی جووڵەی کەمکراوە بکە لە بەڵگەنامەکانی دەستڕاگەیشتنمان .

نموونە

پێکهاتەکانی ئۆف کانڤاس

لە خوارەوە نموونەیەکی offcanvas کە بە شێوەی پێشوەختە نیشان دراوە (لە ڕێگەی .showon .offcanvas). ئۆفکانڤاس پشتگیری لە سەردێڕێک بە دوگمەی داخستنی و پۆلێکی جەستەی ئیختیاری بۆ هەندێک سەرەتایی لەخۆدەگرێت padding. پێشنیار دەکەین کە هەرکاتێک بتوانیت سەردێڕی دەرەوەی کانڤاس لەگەڵ کردارەکانی ڕەتکردنەوەدا بخەیتە ناوەوە، یان کردارێکی ڕەتکردنەوەی ڕوون پێشکەش بکەیت.

ئۆفکانڤاس
ناوەڕۆک بۆ ئۆفکانڤاس لێرە دەچێت. دەتوانیت تەنها نزیکەی هەر پێکهاتەیەکی 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>

دیمۆی ڕاستەوخۆ

دوگمەکانی خوارەوە بەکاربهێنە بۆ پیشاندانی و شاردنەوەی توخمێکی دەرەوەی کانڤاس لە ڕێگەی جاڤاسکڕێپتەوە کە .showپۆلەکە لەسەر توخمێک لەگەڵ .offcanvasپۆلەکەدا ��ەگۆڕێت.

  • .offcanvasناوەڕۆک دەشارێتەوە (بەپێی پێشوەختە)
  • .offcanvas.showناوەڕۆک نیشان دەدات

دەتوانیت بەستەرێک بەکاربهێنیت کە hrefتایبەتمەندییەکەی تێدایە، یان دوگمەیەک بە data-bs-targetتایبەتمەندییەکە. لە هەردوو حاڵەتەکەدا، the data-bs-toggle="offcanvas"is required.

بەستەر لەگەڵ 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-startoffcanvas لە لای چەپی دەرچەی بینینەکە دادەنێت (لە سەرەوە نیشان دراوە)
  • .offcanvas-endئۆف کانڤاس لە لای ڕاستی ڤیوپۆرتەکە دادەنێت
  • .offcanvas-topoffcanvas لە سەرەوەی viewport دادەنێت
  • .offcanvas-bottomoffcanvas لە خوارەوەی 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>
لە کاتێکدا هەردوو ڕێگای ڕەتکردنەوەی ئۆف کانڤاس پشتگیری دەکرێن، لەبیرت بێت کە ڕەتکردنەوەی لە دەرەوەی ئۆف کانڤاس لەگەڵ نەخشی دیزاینی دیالۆگی مۆداڵی WAI-ARIA ناگونجێت . ئەم کارە لەسەر مەترسی خۆت ئەنجام بدە.

لە ڕێگەی جاڤاسکڕێپتەوە

بە دەست چالاک بکە لەگەڵ:

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...
})