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

ئۆفکانڤاس

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

لەم پەیجەدا

چۆن کاردەکات

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

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

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

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

نموونە

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

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

ئۆفکانڤاس
ناوەڕۆک بۆ ئۆفکانڤاس لێرە دەچێت. دەتوانیت تەنها نزیکەی هەر پێکهاتەیەکی Bootstrap یان توخمە تایبەتەکان لێرە دابنێیت.
html 
<div class="offcanvas offcanvas-start show" 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" 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
ئۆفکانڤاس
هەندێک دەق وەک شوێنگرەوە. لە ژیانی ڕاستەقینەدا دەتوانیت ئەو توخمانەت هەبێت کە هەڵتبژاردووە. وەک، دەق، وێنە، لیست و هتد.
html 
<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

سکڕۆڵکردنی جەستە

سکڕۆڵکردنی <body>توخمەکە لەکاردەخرێت کاتێک ئۆفکانڤاسێک و باکگراوندەکەی دیار بێت. data-bs-scrollبۆ چالاککردنی <body>سکڕۆڵکردن تایبەتمەندییەکە بەکاربهێنە .

ئۆفکانڤاس بە سکڕۆڵکردنی جەستە

هەوڵبدە باقی لاپەڕەکە بسکڕۆڵ بکەیت بۆ ئەوەی ئەم هەڵبژاردنە بە کردار ببینیت.

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

سکڕۆڵکردنی جەستە و باکگراوند

هەروەها دەتوانیت <body>بە باکگراوندێکی دیار سکڕۆڵکردن چالاک بکەیت.

باکگراوند بە سکڕۆڵکردن

هەوڵبدە باقی لاپەڕەکە بسکڕۆڵ بکەیت بۆ ئەوەی ئەم هەڵبژاردنە بە کردار ببینیت.

html 
<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" 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" 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>

باکگراوندی ئیستاتیک

کاتێک backdrop لەسەر static دانراوە، offcanvas داناخرێت لەکاتی کلیککردن لە دەرەوەی.

ئۆفکانڤاس
من داناخەم ئەگەر لە دەرەوەی من کلیک بکەیت.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

ئۆفکانڤاسی تاریک

لە v5.2.0 زیاد کراوە

دەرکەوتنی ئۆفکانڤاسەکان بە سوودمەندییەکان بگۆڕە بۆ ئەوەی باشتر لەگەڵ کۆنتێکستە جیاوازەکاندا بگونجێت وەک ناوباری تاریک. لێرەدا ئێمە زیاد دەکەین .text-bg-darkبۆ .offcanvasو .btn-close-whiteبۆ .btn-closeبۆ ستایلکردنی دروست لەگەڵ ئۆفکانڤاسێکی تاریک. ئەگەر لە ناوەوە داونەکانت هەیە، بیر لەوە بکەرەوە کە زیاد .dropdown-menu-darkبکەیت بۆ .dropdown-menu.

ئۆفکانڤاس

ناوەڕۆکی دەرەوەی کانڤاس لێرە دابنێ.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

وەڵامدەرەوە

لە v5.2.0 زیاد کراوە

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

قەبارەی وێبگەڕەکەت بگۆڕە بۆ ئەوەی گۆڕانکاریی وەڵامدەرەوەی ئۆف کانڤاس پیشان بدەیت.
ئۆف کانڤاسی وەڵامدەرەوە

ئەمە ناوەڕۆکە لەناو .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

پۆلەکانی ئۆف کانڤاسی وەڵامدەرەوە لە سەرانسەری بۆ هەر خاڵێکی شکاندن بەردەستە.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

جێگیرکردن

هیچ شوێنێکی پێشوەختە بۆ پێکهاتەکانی ئۆفکانڤاس نییە، بۆیە دەبێت یەکێک لە پۆلەکانی دەستکاریکەر لە خوارەوە زیاد بکەیت.

  • .offcanvas-startoffcanvas لە لای چەپی دەرچەی بینینەکە دادەنێت (لە سەرەوە نیشان دراوە)
  • .offcanvas-endئۆف کانڤاس لە لای ڕاستی ڤیوپۆرتەکە دادەنێت
  • .offcanvas-topoffcanvas لە سەرەوەی viewport دادەنێت
  • .offcanvas-bottomoffcanvas لە خوارەوەی viewport دادەنێت

نموونەکانی سەرەوە و ڕاست و خوارەوە لە خوارەوە تاقی بکەرەوە.

سەرەوەی ئۆفکانڤاس
...
html 
<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
ئۆفکانڤاس ڕاستە
...
html 
<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
خوارەوەی ئۆفکانڤاس
...
html 
<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

دەستڕاگەیشتن

بەو پێیەی پانێڵی دەرەوەی کانڤاس لە ڕووی چەمکییەوە دیالۆگێکی مۆداڵییە، دڵنیابە کە زیاد aria-labelledby="..."دەکەیت — ئاماژەدان بە ناونیشانی دەرەوەی کانڤاس — بۆ .offcanvas. تێبینی بکە پێویست ناکات زیاد بکەیت role="dialog"لەبەر ئەوەی پێشتر لە ڕێگەی جاڤاسکڕێپتەوە زیادمان کردووە.

CSS

گۆڕاوەکان

لە v5.2.0 زیاد کراوە

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS ی پەرەسەندوو لە Bootstrap، ئێستا offcanvas گۆڕاوە ناوخۆییەکانی CSS بەکاردەهێنێت لەسەر .offcanvasبۆ باشترکردنی خۆکارکردنی کاتی ڕاستەقینە. بەهاکان بۆ گۆڕاوەکانی CSS لە ڕێگەی Sass دادەنرێت، بۆیە هێشتا پشتگیری لە خۆکارکردنی Sass دەکرێت، هەروەها.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

گۆڕاوەکانی ساس

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

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

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

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

بژاردەکان

بەو پێیەی دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت، دەتوانیت ناوی هەڵبژاردنێک زیاد بکەیت بۆ data-bs-, وەک لە data-bs-animation="{value}". دڵنیابە لە گۆڕینی جۆری کەیسی ناوی هەڵبژاردنەکە لە “ camelCase ” بۆ “ kebab-case ” لە کاتی تێپەڕاندنی هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا. بۆ نموونە data-bs-custom-class="beautifier"لەبری data-bs-customClass="beautifier".

لە Bootstrap 5.2.0 ەوە، هەموو پێکهاتەکان پشتگیری لە تایبەتمەندییەکی داتا یەدەگی تاقیکاریdata-bs-config دەکەن کە دەتوانێت ڕێکخستنی پێکهاتەی سادە وەک ڕستەیەکی JSON لەخۆبگرێت. کاتێک توخمێک تایبەتمەندی data-bs-config='{"delay":0, "title":123}'و data-bs-title="456"تایبەتمەندیەکانی هەیە، titleبەهای کۆتایی دەبێت 456و تایبەتمەندییە جیاوازەکانی داتا بەهاکان دەگۆڕن کە لە data-bs-config. سەرەڕای ئەوە، تایبەتمەندییە داتاکانی ئێستا دەتوانن بەهاکانی JSON وەک data-bs-delay='{"show":0,"hide":150}'.

ناو جۆر بنەڕەتی وەسف
backdrop boolean یان ڕیزەکەstatic true باکگراوندێک لەسەر جەستە دابنێ لەکاتێکدا ئۆفکانڤاس کراوە بێت. یانیش staticبۆ باکگراوندێک دیاری بکە کە کاتێک کلیک لەسەر دەکرێت ئۆفکانڤاسەکە داناخات.
keyboard boolean true کاتێک کلیلی escape دەکرێتەوە offcanvas دادەخات.
scroll boolean false ڕێگە بە سکڕۆڵی جەستە بدە لەکاتێکدا ئۆفکانڤاس کراوە بێت.

شێوازەکان

شێواز و گواستنەوە ناهاوسەنگەکان

هەموو شێوازەکانی API ناهاوسەنگن و دەست بە گواستنەوە دەکەن . هەر کە گواستنەوەکە دەستی پێکرد بەڵام پێش ئەوەی کۆتایی بێت دەگەڕێنەوە لای پەیوەندیکەرەکە . سەرەڕای ئەوە، بانگەوازێکی شێواز لەسەر پێکهاتەیەکی گواستنەوە پشتگوێ دەخرێت .

بۆ زانیاری زیاتر سەیری بەڵگەنامەکانی جاڤاسکڕێپت بکە .

ناوەڕۆکەکەت وەک توخمێکی دەرەوەی کانڤاس چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object.

دەتوانیت بە بنیاتنان نموونەیەکی ئۆفکانڤاس دروست بکەیت، بۆ نموونە:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
ڕێگا وەسف
getInstance شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی offcanvas بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە.
getOrCreateInstance شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی offcanvas بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە، یان یەکێکی نوێ دروست بکەیت لە ئەگەری دەستپێنەکردندا.
hide توخمێکی ئۆف کانڤاس دەشارێتەوە. پێش ئەوەی توخمە ئۆفکانڤاسەکە لە ڕاستیدا بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.offcanvasڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ بانگکەر.
show توخمێکی ئۆف کانڤاس نیشان دەدات. پێش ئەوەی توخمە ئۆفکانڤاسەکە بەڕاستی پیشان بدرێت دەگەڕێتەوە بۆ بانگکەر (واتە پێش ئەوەی shown.bs.offcanvasڕووداوەکە ڕووبدات).
toggle توخمێکی دەرەوەی کانڤاس دەگۆڕێت بۆ پیشاندانی یان شاراوە. دەگەڕێتەوە بۆ بانگکەر پێش ئەوەی توخمە ئۆفکانڤاسەکە لە ڕاستیدا پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی shown.bs.offcanvasیان hidden.bs.offcanvasڕووبدات).

ڕووداوەکان

پۆلی ئۆف کانڤاسی بووتستراپ چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی ئۆف کانڤاس.

جۆری ڕووداو وەسف
hide.bs.offcanvas ئەم ڕووداوە دەستبەجێ تەقە دەکرێت کاتێک hideمیتۆدەکە بانگ کراوە.
hidden.bs.offcanvas ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی دەرەوەی کانڤاس لە بەکارهێنەر شاراوەتەوە (چاوەڕوان دەکات بۆ تەواوبوونی گواستنەوەکانی CSS).
hidePrevented.bs.offcanvas ئەم ڕووداوە کاتێک تەقە دەکرێت کە ئۆفکانڤاسەکە پیشان دەدرێت، باکگراوندەکەی دەبێت staticو کلیکێک لە دەرەوەی ئۆفکانڤاسەکە ئەنجام دەدرێت. هەروەها ڕووداوەکە کاتێک ئاگر دەکرێتەوە کە کلیلی هەڵهاتن فشار بخرێتە سەر و keyboardبژاردەکە لەسەر false.
show.bs.offcanvas ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک showشێوازی نموونە بانگ دەکرێت.
shown.bs.offcanvas ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی دەرەوەی کانڤاس بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی CSS دەکات). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})