Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
in English

Offcanvas nga

Mangbangon kadagiti nailemmeng a sidebar iti proyektom para iti nabigasion, shopping cart, ken dadduma pay babaen ti sumagmamano a klase ken ti JavaScript plugin-mi.

Iti daytoy a panid

No kasano ti panagandar dayta

Ti Offcanvas ket maysa a paset ti sidebar a mabalin a mai-toggle babaen ti JavaScript tapno agparang manipud iti kannigid, kannawan, wenno baba nga igid ti viewport. Dagiti buton wenno angkla ket maus-usar a kas dagiti trigger a naikapet kadagiti espesipiko nga elemento nga i-toggle-mo, ken datadagiti attribute ket maus-usar a mangawag ti JavaScriptmi.

  • Ti Offcanvas ket mangibinglay ti sumagmamano kadagiti isu met laeng a kodigo ti JavaScript a kas dagiti modal. Iti konsepto, agpapadada unay, ngem agsina dagitoy a plugin.
  • Kasta met, dagiti sumagmamano a taudan a Sass a variable para kadagiti estilo ken dagiti dimension ti offcanvas ket natawid manipud kadagiti variable ti modal.
  • No maipakita, ti offcanvas ket mangiraman ti default a backdrop a mabalin a mai-klik tapno mailemmeng ti offcanvas.
  • Kas kadagiti modal, maysa laeng nga offcanvas ti mabalin a maipakita iti tunggal gundaway.

Ulo nga agpangato! No maited no kasano a ti CSS ket mangasikaso kadagiti animasion, saanmo a mabalin nga usaren marginwenno translateiti maysa nga .offcanvaselemento. Imbes ketdi, usaren ti klase a kas maysa nga agwaywayas nga elemento ti panagbalkot.

Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .

Dagiti pagarigan

Dagiti paset ti offcanvas

Iti baba ket ti maysa nga offcanvas a pagarigan a naipakita babaen ti default (babaen ti .showon .offcanvas). Ti Offcanvas ket mangiraman ti suporta para iti maysa nga ulo nga addaan iti agserra a buton ken ti opsional a klase ti bagi para iti sumagmamano nga umuna padding. Isingasingmi nga iramanmo dagiti offcanvas nga ulo nga addaan kadagiti panagikkat a panagtignay no mabalin, wenno mangipaay ti nalawag a panagikkat a panagtignay.

Offcanvas nga
Ti linaon para iti offcanvas ket mapan ditoy. Mabalinmo nga ikabil ti dandani laeng ania man a paset ti Bootstrap wenno dagiti kostumbre nga elemento ditoy. 
<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>

Agbiag nga demo

Usaren dagiti buton iti baba tapno ipakita ken ilemmeng ti maysa nga offcanvas nga elemento babaen ti JavaScript a mangbalbaliw ti .showklase iti maysa nga elemento iti .offcanvasklase.

  • .offcanvasilemmeng ti linaon (default) .
  • .offcanvas.showipakitana ti linaonna

Mabalinmo nga usaren ti silpo nga addaan iti hrefattribute, wenno ti buton nga addaan iti data-bs-targetattribute. Iti agpada a kaso, ti data-bs-toggle="offcanvas"ket kasapulan.

Isilpo ti href
Offcanvas nga
Dadduma a teksto kas placeholder. Iti pudno a biag mabalinmo ti maaddaan kadagiti elemento a pinilim. Kas iti, teksto, ladawan, listaan, kdpy. 
<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>

Panagplastar

Awan ti default a pannakaikabil para kadagiti paset ti offcanvas, isu a masapul nga inayonmo ti maysa kadagiti klase ti mangbalbaliw iti baba;

  • .offcanvas-startmangikabil ti offcanvas iti kannigid ti viewport (naipakita iti ngato) .
  • .offcanvas-endikabilna ti offcanvas iti kannawan ti viewport
  • .offcanvas-topikabilna ti offcanvas iti ngato ti viewport
  • .offcanvas-bottomikabilna ti offcanvas iti baba ti viewport

Padasem dagiti pagarigan iti ngato, kannawan, ken baba.

Offcanvas nga tuktok
... 
<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 nga kannawan
... 
<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 nga baba
... 
<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>

Backdrop nga

Ti panag-scroll ti <body>elemento ket nabalbaliwan no ti maysa nga offcanvas ken ti backdropna ket makita. Usaren ti data-bs-scrollattribute tapno i-toggle ti <body>panag-scroll ken data-bs-backdroptapno i-toggle ti backdrop.

Namaris iti scroll

Padasem nga i-scroll ti nabati a paset ti panid tapno makitam daytoy a pagpilian nga agtigtignay.

Offcanvas nga addaan iti backdrop

.....

Backdrop nga addaan iti panag-scroll

Padasem nga i-scroll ti nabati a paset ti panid tapno makitam daytoy a pagpilian nga agtigtignay.

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

Ti pannakagun-od

Gapu ta ti offcanvas a panel ket konsepto a maysa a modal a dialogo, siguraduen nga inayon aria-labelledby="..."—a mangitudo ti paulo ti offcanvas —iti .offcanvas. Imutektekanyo a saanyo a kasapulan ti mangnayon role="dialog"yantangay nainayonmi dayta babaen ti JavaScript.

Sass nga

Dagiti Variable

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

Panagusar

Ti offcanvas plugin ket agus-usar kadagiti sumagmamano a klase ken dagiti attribute tapno mangasikaso ti nadagsen a panagipangato:

  • .offcanvasilemmengna ti linaonna
  • .offcanvas.showipakitana ti linaonna
  • .offcanvas-startilemmeng ti offcanvas iti kannigid
  • .offcanvas-endilemmeng ti offcanvas iti kannawan
  • .offcanvas-bottomilemmengna ti offcanvas iti baba

Manginayon ti buton ti panangilaksid nga addaan ti data-bs-dismiss="offcanvas"attribute, a mangtignay ti panagusar ti JavaScript. Siguraduen nga usaren ti <button>elemento a kaduana para iti umno a kababalin iti ballasiw dagiti amin nga alikamen.

Babaen kadagiti attribute ti datos

Ag-toggle nga

Inayon data-bs-toggle="offcanvas"ken a data-bs-targetwenno hrefiti elemento tapno automatiko a mangituding ti kontrol ti maysa nga offcanvas nga elemento. Ti data-bs-targetattribute ket umawat ti maysa a CSS a mangpili a pangipakat ti offcanvas iti. Siguraduen nga inayon ti klase offcanvasiti offcanvas element. No kayatmo a default a malukatan, inayon ti kanayonan a klase show.

Papanawen

Ti pannakaikkat ket mabalin a maragpat babaen ti dataattribute iti maysa a buton iti uneg ti offcanvas a kas naipakita iti baba:

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

wenno iti maysa a buton iti ruar ti offcanvas babaen ti panangusar iti data-bs-targetkas naipakita iti baba:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Bayat nga agpada a dagiti wagas ti panangilaksid ti maysa nga offcanvas ket nasuportaran, laglagipen a ti panangilaksid manipud iti ruar ti maysa nga offcanvas ket saan a maipada iti WAI-ARIA a modal a padron ti disenio ti dialogo . Aramidenyo daytoy iti bukodyo a risgo.

Babaen ti JavaScript

Pagbalinen a manual babaen ti:

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

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-bs-, a kas iti data-bs-backdrop="".

Nagan Tipo Default Panangiladawan
backdrop boolean nga true Mangikabil iti backdrop iti bagi bayat a nakalukat ti offcanvas
keyboard boolean nga true Serraan ti offcanvas no maipidut ti escape key
scroll boolean nga false Bay-an nga ag-scroll ti bagi bayat a nakalukat ti offcanvas

Dagiti Pamay-an

Dagiti asynchronous a pamay-an ken panagbalbaliw

Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .

Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .

Paaktiboenna ti linaonmo kas maysa nga offcanvas nga elemento. Awaten ti maysa nga opsional a pagpilian object.

Mabalinmo ti mangpartuat ti maysa nga offcanvas nga instansia babaen ti konstruktor, kas pagarigan:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Wagas Panangiladawan
toggle I-toggle ti maysa nga offcanvas nga elemento iti maipakita wenno mailemmeng. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti elemento ti offcanvas (kayatna a sawen sakbay a mapasamak ti shown.bs.offcanvaswenno hidden.bs.offcanvaspasamak).
show Ipakita ti maysa nga elemento nga offcanvas. Agsubli iti tumawag sakbay nga aktual a naipakita ti elemento ti offcanvas (kayatna a sawen sakbay a shown.bs.offcanvasmapasamak ti pasamak).
hide Ilemmeng ti maysa nga elemento nga offcanvas. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti elemento ti offcanvas (kayatna a sawen sakbay a hidden.bs.offcanvasmapasamak ti pasamak).
getInstance Estatiko a pamay-an a mangipalubos kenka a makaala ti offcanvas nga instansia a nainaig iti maysa nga elemento ti DOM
getOrCreateInstance Estatiko a pamay-an a mangipalubos kenka a makaala ti offcanvas nga instansia a nainaig iti maysa nga elemento ti DOM, wenno mangpartuat ti baro no kas pagarigan saan a nairugi

Dagiti Pasamak

Ti offcanvas a klase ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti offcanvas a panagandar.

Kita ti pasamak Panangiladawan
show.bs.offcanvas Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
shown.bs.offcanvas Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti offcanvas ket naaramid a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a makompleto).
hide.bs.offcanvas Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ket naawagan.
hidden.bs.offcanvas Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti offcanvas ket nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a makompleto). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})