in English

Offcanvas

Wubake uruhande rwihishe mumushinga wawe wo kugendagenda, amakarita yo guhaha, nibindi byinshi hamwe namasomo make hamwe na plugin yacu ya JavaScript.

Kuriyi page

Uburyo ikora

Offcanvas nigice cyo kuruhande gishobora guhindurwa hifashishijwe JavaScript kugirango ugaragare uhereye ibumoso, iburyo, cyangwa hepfo yuruhande rwo kureba. Utubuto cyangwa inanga zikoreshwa nka trigger zifatanije nibintu byihariye uhinduranya, datanibiranga bikoreshwa mugutabaza JavaScript yacu.

Offcanvas isangira amwe muma code ya JavaScript nkuburyo busanzwe. Mubisanzwe, birasa cyane, ariko ni amacomeka atandukanye.
Mu buryo busa nabwo, inkomoko imwe ya Sass ihindagurika yuburyo bwa offcanvas nubunini bwarazwe kuva modal ihinduka.
Iyo yerekanwe, offcanvas ikubiyemo inyuma yinyuma ishobora gukanda kugirango uhishe offcanvas.
Bisa nuburyo, offcanvas imwe gusa irashobora kwerekanwa icyarimwe.

Umutwe! Urebye uko CSS ikora animasiyo, ntushobora gukoresha margincyangwa translatekubintu .offcanvas. Ahubwo, koresha urwego nkibintu byigenga bipfunyika.

Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motionnibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .

Ingero

Ibice bya Offcanvas

Hasi nurugero rwa offcanvas rwerekanwe kubisanzwe (binyuze .showkuri .offcanvas). Offcanvas ikubiyemo inkunga kumutwe ufite buto yegeranye hamwe nicyiciro cyumubiri utabishaka kubwa mbere padding. Turagusaba ko washyiramo imitwe ya offcanvas hamwe nibikorwa byo kwirukana igihe cyose bishoboka, cyangwa ugatanga igikorwa cyo kwirukana.

Ibirimo kuri offcanvas bijya hano. Urashobora gushira hafi ibice byose bya Bootstrap cyangwa ibintu byabigenewe hano.

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

Kubaho

Koresha buto hepfo kugirango werekane kandi uhishe ikintu cya offcanvas ukoresheje JavaScript ihinduranya .showicyiciro kubintu hamwe .offcanvasnishuri.

.offcanvasahisha ibirimo (isanzwe)
.offcanvas.showyerekana ibirimo

Urashobora gukoresha umurongo hamwe na hrefkiranga, cyangwa buto hamwe data-bs-targetnibiranga. Muri ibyo bihe byombi, data-bs-toggle="offcanvas"urasabwa.

Ihuza na href

Inyandiko zimwe nkahantu. Mubuzima busanzwe urashobora kugira ibintu wahisemo. Nk, inyandiko, amashusho, urutonde, nibindi

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

Gushyira

Hano ntahantu hasanzwe hashyirwa ibice bya offcanvas, ugomba rero kongeramo rimwe mubyiciro bihindura hepfo;

.offcanvas-startshyira offcanvas ibumoso bwo kureba (yerekanwe hejuru)
.offcanvas-endshyira offcanvas iburyo bwa kureba
.offcanvas-topshyira offcanvas hejuru yicyerekezo
.offcanvas-bottomshyira offcanvas hepfo yuburyo bwo kureba

Gerageza ingero zo hejuru, iburyo, no hepfo hepfo.

...

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

Inyuma

Kuzenguruka ibintu <body>birahagarikwa mugihe offcanvas ninyuma yayo bigaragara. Koresha data-bs-scrollikiranga kugirango uhindure <body>umuzingo no data-bs-backdropguhinduranya inyuma.

Gerageza kuzenguruka ahasigaye kurupapuro kugirango urebe iyi nzira mubikorwa.

.....

Gerageza kuzenguruka ahasigaye kurupapuro kugirango urebe iyi nzira mubikorwa.

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

Kuboneka

Kubera ko ikibaho cya offcanvas ari uburyo bwo kuganira, menya ko wongeraho aria-labelledby="..."- werekana umutwe wa offcanvas - kuri .offcanvas. Menya ko udakeneye kongeramo role="dialog"kuva tumaze kongeramo binyuze kuri JavaScript.

Sass

Ibihinduka

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

Ikoreshwa

Amacomeka ya offcanvas akoresha ibyiciro bike nibiranga kugirango akemure ibintu biremereye:

.offcanvasahisha ibirimo
.offcanvas.showyerekana ibirimo
.offcanvas-startahisha offcanvas ibumoso
.offcanvas-endahisha offcanvas iburyo
.offcanvas-bottomahisha offcanvas hepfo

Ongeraho buto yo kwirukana hamwe data-bs-dismiss="offcanvas"nibiranga, bikurura imikorere ya JavaScript. Witondere gukoresha <button>element hamwe nayo kugirango imyitwarire iboneye mubikoresho byose.

Binyuze mu biranga amakuru

Ongeraho data-bs-toggle="offcanvas"na a data-bs-targetcyangwa hrefkuri element kugirango uhite ugenera kugenzura ikintu kimwe cya offcanvas. Ikiranga data-bs-targetcyakira CSS uhitamo kugirango akoreshe offcanvas kuri. Wemeze kongeramo urwego offcanvaskubintu bya offcanvas. Niba wifuza ko byafungura, ongeraho urwego rwinyongera show.

Binyuze kuri JavaScript

Gushoboza intoki hamwe na:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-bs-, Nka Muri data-bs-backdrop="".

Izina	Andika	Mburabuzi	Ibisobanuro
`backdrop`	boolean	`true`	Koresha inyuma yumubiri mugihe offcanvas ifunguye
`keyboard`	boolean	`true`	Gufunga offcanvas mugihe urufunguzo rwo guhunga rukanda
`scroll`	boolean	`false`	Emerera umubiri kuzunguruka mugihe offcanvas ifunguye

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro .

Koresha ibikubiyemo nkibintu bya offcanvas. Emera amahitamo object.

Urashobora gukora offcanvas urugero hamwe niyubaka, kurugero:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Uburyo	Ibisobanuro
`toggle`	Kuzuza ikintu cya offcanvas kugirango werekane cyangwa uhishe. Garuka kumuhamagara mbere yikintu cya offcanvas cyerekanwe cyangwa cyihishe (ni ukuvuga mbere yuko ibyabaye `shown.bs.offcanvas`cyangwa `hidden.bs.offcanvas`ibyabaye bibaho).
`show`	Erekana ikintu cya offcanvas. Garuka kumuhamagara mbere yuko ibintu bya offcanvas byerekanwe mubyukuri (nukuvuga mbere yuko `shown.bs.offcanvas`ibyabaye bibaho).
`hide`	Hisha ikintu cya offcanvas. Garuka kumuhamagara mbere yuko ibintu bya offcanvas bihishwa mubyukuri (nukuvuga mbere yuko `hidden.bs.offcanvas`ibyabaye bibaho).
`getInstance`	Uburyo buhamye butuma ubona urugero rwa offcanvas rujyanye nibintu bya DOM
`getOrCreateInstance`	Uburyo buhamye bugufasha kubona urugero rwa offcanvas rujyanye nibintu bya DOM, cyangwa gukora bundi bushya mugihe bitatangijwe

Ibyabaye

Bootstrap's offcanvas ibyiciro byerekana ibintu bike byo guhuza ibikorwa bya offcanvas.

Ubwoko bwibyabaye	Ibisobanuro
`show.bs.offcanvas`	Ibirori birasa ako kanya mugihe `show`urugero rwitwa.
`shown.bs.offcanvas`	Ibi birori birukanwa mugihe ikintu cya offcanvas cyakozwe kugaragara kubakoresha (bizategereza ko CSS ihinduka).
`hide.bs.offcanvas`	Iki gikorwa kirahita gihita iyo `hide`uburyo bwahamagawe.
`hidden.bs.offcanvas`	Ibirori birukanwa mugihe ikintu cya offcanvas cyihishe kumukoresha (uzategereza ko CSS ihinduka).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

Uburyo ikora

Ingero

Ibice bya Offcanvas

Offcanvas

Kubaho

Offcanvas

Gushyira

Offcanvas hejuru

Offcanvas iburyo

Offcanvas hepfo

Inyuma

Ibara hamwe no kuzunguruka

Offcanvas hamwe ninyuma

Inyuma hamwe nu muzingo

Kuboneka

Sass

Ibihinduka

Ikoreshwa

Binyuze mu biranga amakuru

Binyuze kuri JavaScript

Amahitamo

Uburyo

Uburyo butajegajega ninzibacyuho

Ibyabaye