Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
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.

A wannan shafi

Yadda yake aiki

Offcanvas yanki ne na gefe wanda za'a iya jujjuya shi ta JavaScript don bayyana daga hagu, dama, saman, ko gefen ƙasa 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.
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>

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

Gungura jiki

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

Offcanvas tare da gungurawa jiki

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

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>

Gungura jiki da bayan gida

Hakanan zaka iya kunna <body>gungurawa tare da bayanan baya na bayyane.

Baya tare da gungurawa

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

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>

A tsaye

Lokacin da aka saita bangon baya zuwa tsaye, offcanvas ba zai rufe ba lokacin danna wajensa.

Offcanvas
Ba zan rufe ba idan kun danna waje na.
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>

Dark offcanvas

An ƙara a cikin v5.2.0

Canza kamannin bangon bango tare da kayan aiki don dacewa da su zuwa yanayi daban-daban kamar navbars masu duhu. Anan mun ƙara .text-bg-darkzuwa da .offcanvaskuma .btn-close-whitedon .btn-closesalo mai kyau tare da bangon bango mai duhu. Idan kuna da zazzagewa a ciki, la'akari kuma ƙara .dropdown-menu-darkzuwa .dropdown-menu.

Offcanvas

Sanya abun ciki na waje anan.

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>

Mai amsawa

An ƙara a cikin v5.2.0

Azuzuwan ɓangarorin waje masu amsa suna ɓoye abun ciki a wajen kallon kallo daga ƙayyadadden wuri da ƙasa. Sama da wancan lokacin hutu, abubuwan da ke ciki za su kasance kamar yadda aka saba. Misali, .offcanvas-lgyana ɓoye abun ciki a cikin bangon bangon da ke ƙasa da wurin lgkarya, amma yana nuna abun cikin sama da wurin lgkarya.

Maimaita girman burauzar ku don nuna jujjuyawar canvas mai amsawa.
Mai amsawa daga canvas

Wannan abun ciki ne a cikin .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>

Ana samun azuzuwan azuzuwan kanfas a ko'ina don kowane wurin hutu.

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

Wuri

Babu tsoho wuri don abubuwan da suka dace na waje, don haka dole ne ku ƙara ɗaya daga cikin 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
...
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>
Offcanvas dama
...
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>
Offcanvas kasa
...
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>

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.

CSS

Masu canji

An ƙara a cikin v5.2.0

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, offcanvas yanzu yana amfani da masu canjin CSS na gida .offcanvasdon haɓaka gyare-gyare na ainihi. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

  --#{$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};

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-topyana ɓoye ɓarnar da ke saman
  • .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 ARIA Jagoran Ayyukan Mawallafi ba (modal) . Yi wannan a kan hadarin ku.

Ta hanyar JavaScript

Kunna da hannu tare da:

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

Zabuka

Kamar yadda za a iya wuce zaɓuɓɓuka ta hanyar sifofin bayanai ko JavaScript, zaku iya ƙara sunan zaɓi zuwa data-bs-, kamar a cikin data-bs-animation="{value}". Tabbatar canza nau'in shari'ar sunan zaɓi daga " CamelCase " zuwa " kebab-case " lokacin ƙaddamar da zaɓuɓɓuka ta hanyar halayen bayanai. Misali, amfani data-bs-custom-class="beautifier"maimakon data-bs-customClass="beautifier".

Dangane da Bootstrap 5.2.0, duk abubuwan da aka gyara suna goyan bayan sifa da aka keɓance na gwajidata-bs-config wanda zai iya daidaita tsarin sassa mai sauƙi azaman kirtani JSON. Lokacin da kashi yana data-bs-config='{"delay":0, "title":123}'da data-bs-title="456"sifofi, titleƙimar ƙarshe za ta kasance 456kuma keɓantattun halayen bayanan za su soke ƙimar da aka bayar akan data-bs-config. Bugu da ƙari, halayen bayanan da ke akwai suna iya ɗaukar ƙimar JSON kamar data-bs-delay='{"show":0,"hide":150}'.

Suna Nau'in Default Bayani
backdrop boolean ko kirtanistatic true Aiwatar da bayanan baya a jiki yayin da ke buɗe waje. A madadin, saka staticdon bayanan baya wanda baya rufe abin da aka kashe lokacin da aka danna.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Hanya Bayani
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 mai alaƙa da wani abu na DOM, ko ƙirƙirar sabo idan ba a fara shi ba.
hide Yana ɓoye ɓangarori na waje. Komawa ga mai kira kafin a ɓoye ɓoyayyiyar ɓangarori (watau kafin 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).
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).

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
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).
hidePrevented.bs.offcanvas Ana harba wannan taron lokacin da aka nuna offcanvas, bayanansa yana statickuma danna waje na offcanvas. Hakanan ana harba taron lokacin da aka danna maɓallin gudu kuma keyboardaka saita zaɓi zuwa false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})