Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
in English

Offcanvas

Gina ɓoyayyiyar labarun gefe a cikin aikin ku don kewayawa, motocin sayayya, da ƙari tare da ƴan azuzuwan da plugin ɗin mu na JavaScript.

Yadda yake aiki

Offcanvas yanki ne na gefe wanda za'a iya jujjuya shi ta JavaScript don bayyana daga gefen hagu, dama, ko kasa na tashar kallo. Ana amfani da maɓalli ko anka a matsayin abubuwan da ke makale da takamaiman abubuwan da kake juyawa, kuma dataana amfani da sifofi don kiran JavaScript ɗin mu.

  • Offcanvas yana raba wasu lambar JavaScript iri ɗaya kamar modal. A zahiri, suna kama da juna, amma plugins ne daban.
  • Hakazalika, wasu tushen Sass masu canji don salo da girma na offcanvas an gaji su daga masu canji na modal.
  • Lokacin da aka nuna, offcanvas ya haɗa da tsohuwar bayanan baya wanda za'a iya dannawa don ɓoye abin da aka kashe.
  • Hakazalika da modals, za a iya nuna tazara ɗaya kawai a lokaci guda.

A kula! Ganin yadda CSS ke sarrafa raye-raye, ba za ku iya amfani da su marginko translatekan wani .offcanvasabu ba. Madadin haka, yi amfani da ajin azaman abin rufewa mai zaman kansa.

Tasirin raye-rayen wannan bangaren ya dogara ne da prefers-reduced-motiontambayar kafofin watsa labarai. Dubi raguwar sashin motsi na takaddun damar mu .

Misalai

Abubuwan Offcanvas

A ƙasa akwai misali na waje wanda aka nuna ta tsohuwa (ta hanyar kunnawa .show) .offcanvas. Offcanvas ya haɗa da goyan bayan kai mai maɓalli kusa da ajin jiki na zaɓi don wasu na farko padding. Muna ba da shawarar cewa ku haɗa da masu kai na waje tare da korar ayyuka a duk lokacin da zai yiwu, ko samar da matakin korar bayyane.

Offcanvas
Abun ciki na offcanvas yana zuwa nan. Kuna iya sanya kusan kowane ɓangaren Bootstrap ko abubuwan al'ada anan.
<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>

Live demo

Yi amfani da maɓallan da ke ƙasa don nunawa da ɓoye ɓoyayyiyar ɓangarori ta hanyar JavaScript wanda ke jujjuya .showajin akan wani kashi tare da .offcanvasajin.

  • .offcanvasyana ɓoye abun ciki (tsoho)
  • .offcanvas.showyana nuna abun ciki

Kuna iya amfani da hanyar haɗi tare da hrefsifa, ko maɓalli tare da data-bs-targetsifa. A cikin duka biyun, data-bs-toggle="offcanvas"ana buƙatar.

Haɗi tare da href
Offcanvas
Wasu rubutu azaman mai riƙewa. A rayuwa ta gaske za ku iya samun abubuwan da kuka zaɓa. Kamar, rubutu, hotuna, jeri, da sauransu.
<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>

Wuri

Babu wani tsoho wuri don abubuwan da suka dace na waje, don haka dole ne ku ƙara ɗayan azuzuwan masu gyara a ƙasa;

  • .offcanvas-startya ajiye canvas a gefen hagu na wurin kallo (wanda aka nuna a sama)
  • .offcanvas-endsanya offcanvas a hannun dama na kallon kallo
  • .offcanvas-topsanya offcanvas a saman tashar kallo
  • .offcanvas-bottomsanya offcanvas a kasan wurin kallo

Gwada misalan sama, dama, da ƙasa daga ƙasa.

Offcanvas saman
...
<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 dama
...
<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>
Offcanvas kasa
...
<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>

Bayanan baya

Ana kashe gungurawa <body>kashi lokacin da aka ga bangon bango da bangon sa. Yi amfani da data-bs-scrollsifa don jujjuya <body>gungurawa da data-bs-backdropjujjuya bayanan baya.

Mai launi tare da gungurawa

Gwada gungurawa sauran shafin don ganin wannan zaɓin yana aiki.

Offcanvas tare da bangon baya

......

Baya tare da gungurawa

Gwada gungurawa sauran shafin don ganin wannan zaɓin yana aiki.

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

Dama

Tun da offcanvas panel a zahiri magana ce ta modal, tabbatar da ƙara aria-labelledby="..."- nuna taken offcanvas - zuwa .offcanvas. Lura cewa ba kwa buƙatar ƙarawa role="dialog"tunda mun riga mun ƙara ta JavaScript.

Sass

Masu canji

$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;

Amfani

The offcanvas plugin yana amfani da ƴan azuzuwan da halaye don ɗaukar nauyi mai nauyi:

  • .offcanvasboye abun ciki
  • .offcanvas.showyana nuna abun ciki
  • .offcanvas-startyana ɓoye ɓangarorin gefen hagu
  • .offcanvas-endyana ɓoye ɓangarorin gefen dama
  • .offcanvas-bottomYana ɓoye ɓarnar da ke ƙasa

Ƙara maɓallin korarwa tare da data-bs-dismiss="offcanvas"sifa, wanda ke haifar da aikin JavaScript. Tabbatar amfani da <button>kashi tare da shi don halayen da suka dace a duk na'urori.

Ta hanyar bayanan halayen

Juyawa

Ƙara data-bs-toggle="offcanvas"da data-bs-targetko hrefzuwa kashi don sanya ikon sarrafa kashi ɗaya na waje. Siffar data-bs-targettana karɓar mai zaɓin CSS don amfani da bangon bango zuwa. Tabbatar ƙara ajin offcanvaszuwa kashi na waje. Idan kuna son buɗewa ta tsohuwa, ƙara ƙarin ajin show.

Korar

Ana iya samun korarwa tare da datasifa akan maɓalli a cikin bango kamar yadda aka nuna a ƙasa:

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

ko a kan maɓalli a waje da canvas ta amfani da data-bs-targetkamar yadda aka nuna a ƙasa:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Duk da yake ana goyan bayan duka hanyoyin da za a yi watsi da canvas, ka tuna cewa korar daga waje ba ta dace da tsarin ƙirar maganganu na WAI-ARIA ba . Yi wannan a kan hadarin ku.

Ta hanyar JavaScript

Kunna da hannu tare da:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-bs-, kamar a cikin data-bs-backdrop="".

Suna Nau'in Default Bayani
backdrop boolean true Aiwatar da bayanan baya a jiki yayin da ke buɗe waje
keyboard boolean true Yana rufe kashe kanvas lokacin da aka danna maɓallin guduwa
scroll boolean false Bada izinin gungurawa jiki yayin da a buɗe canvas

Hanyoyin

Hanyoyi masu daidaitawa da canji

Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .

Duba takaddun JavaScript ɗin mu don ƙarin bayani .

Yana kunna abun cikin ku azaman ɓangarori na waje. Yana yarda da zaɓin zaɓi object.

Kuna iya ƙirƙirar misali na waje tare da mai gini, misali:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Hanya Bayani
toggle Yana jujjuya wani abu na waje don nunawa ko ɓoye. Komawa ga mai kira kafin a nuna ainihin abin da ke ɓoye ko ɓoye (watau kafin abin ya faru shown.bs.offcanvasko hidden.bs.offcanvasabin ya faru).
show Yana nuna wani abu na waje. Komawa ga mai kira kafin a nuna abin da ya faru a zahiri (watau kafin shown.bs.offcanvasabin ya faru).
hide Yana ɓoye ɓangarori na waje. Komawa ga mai kira kafin a ɓoye ɓoyayyiyar ɓangarori (watau kafin hidden.bs.offcanvasabin ya faru).
getInstance Hanyar a tsaye wacce ke ba ku damar samun misalin waje mai alaƙa da abun DOM
getOrCreateInstance Hanyar a tsaye wacce ke ba ku damar samun misali na waje da ke da alaƙa da abun DOM, ko ƙirƙirar sabo idan ba a fara shi ba.

Abubuwan da suka faru

Ajin offcanvas na Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan waje.

Nau'in taron Bayani
show.bs.offcanvas Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
shown.bs.offcanvas Ana korar wannan taron ne lokacin da aka bayyana abin da ke waje ga mai amfani (zai jira canjin CSS ya kammala).
hide.bs.offcanvas Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar.
hidden.bs.offcanvas Ana korar wannan taron lokacin da aka ɓoye ɓoyayyiyar ɓangarori daga mai amfani (zai jira canjin CSS ya kammala).
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})