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.

A wannan shafi

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.

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

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.

...

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

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.

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

......

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

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;

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

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

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.offcanvas`ko `hidden.bs.offcanvas`abin 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.offcanvas`abin ya faru).
`hide`	Yana ɓoye ɓangarori na waje. Komawa ga mai kira kafin a ɓoye ɓoyayyiyar ɓangarori (watau kafin `hidden.bs.offcanvas`abin ya faru).
`getInstance`	Hanyar a tsaye wacce ke ba ku damar samun misalin waje mai alaƙa da abun DOM
`getOrCreateInstance`	Hanyar da ba ta dace ba wacce ke ba ku damar samun misalin waje mai 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 `show`aka 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 `hide`aka 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...
})

Offcanvas

Yadda yake aiki

Misalai

Abubuwan Offcanvas

Offcanvas

Live demo

Offcanvas

Wuri

Offcanvas saman

Offcanvas dama

Offcanvas kasa

Bayanan baya

Mai launi tare da gungurawa

Offcanvas tare da bangon baya

Bayan baya tare da gungurawa

Dama

Sass

Masu canji

Amfani

Ta hanyar bayanan halayen

Ta hanyar JavaScript

Zabuka

Hanyoyin

Hanyoyi masu daidaitawa da canji

Abubuwan da suka faru