Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga
in English

Fa'alavalava

Fausia pito pito natia i totonu o lau poloketi mo faʻasalalauga, faʻatau faʻatau, ma isi mea faʻatasi ma nai vasega ma le matou JavaScript plugin.

I luga o lenei itulau

E faapefea ona galue

O le Offcanvas ose itu e mafai ona fesuia'i e ala i le JavaScript e fa'aalia mai le agavale, taumatau, po'o le pito i lalo ole va'aiga. O faʻamau poʻo taula e faʻaaogaina e fai ma faʻaoso e faʻapipiʻi i elemene maʻoti o loʻo e fesuiaʻi, ma datafaʻaaogaina uiga e faʻaogaina ai la matou JavaScript.

  • O lo'o fa'asoa e Offcanvas nisi o code JavaScript tutusa e pei o modals. I le faʻataʻitaʻiga, e talitutusa lava, ae o ni mea faʻapipiʻi eseese.
  • E fa'apena fo'i, o nisi fa'apogai fa'aliliuga Sass mo sitaili ma fua a offcanvas o lo'o tu'ufa'atasia mai suiga a le modal.
  • A fa'aalia, o le offcanvas o lo'o i ai se fa'ata'ita'i fa'aletonu e mafai ona kiliki e nana ai le tapoleni.
  • E tutusa ma modals, e na'o le tasi le tapoleni e mafai ona fa'aalia ile taimi.

Ulu i luga! Tuuina atu pe faʻafefea ona faʻaogaina e le CSS faʻafiafiaga, e le mafai ona e faʻaogaina marginpe translatei luga o se .offcanvaselemene. Nai lo lena, fa'aaoga le vasega e fai ma mea fa'apipi'i tuto'atasi.

O le aafiaga o le animation o lenei vaega e fa'alagolago i le su'esu'ega a le prefers-reduced-motionaufaasālalau. Va'ai le vaega fa'aitiitiga fa'aitiitiga oa matou pepa fa'aoga avanoa .

Faataitaiga

Vaega o le tapoleni

O lo'o i lalo se fa'ata'ita'iga offcanvas o lo'o fa'aalia e ala i le fa'aletonu (e ala .showile on .offcanvas). O le Offcanvas e aofia ai le lagolago mo se ulutala ma se ki tapuni ma se vasega tino e filifili mo nisi padding. Matou te fautua atu ia e fa'aofia fa'aulutala offcanvas ma fa'ate'a gaioiga i so'o se taimi e mafai ai, po'o le tu'uina atu o se fa'ate'a fa'a'ole'ole fa'aalia.

Fa'alavalava
O anotusi mo le offcanvas e alu iinei. E mafai ona e tuʻuina naʻo soʻo se vaega Bootstrap poʻo elemene masani iinei. 
<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

Fa'aoga fa'amau o lo'o i lalo e fa'aali ma nana ai se mea e le'i fa'atauva'a e ala i le JavaScript e fa'asolo ai le .showvasega i se elemene ma le .offcanvasvasega.

  • .offcanvasnatia mea o lo'o iai (tauaga)
  • .offcanvas.showfa'aalia anotusi

E mafai ona e faʻaogaina se fesoʻotaʻiga ma le hrefuiga, poʻo se faʻamau ma le data-bs-targetuiga. I tulaga uma e lua, data-bs-toggle="offcanvas"e manaʻomia.

So'oga ma href
Fa'alavalava
O nisi tusitusiga o lo'o tu'u iai. I le olaga moni e mafai ona e maua elemene na e filifilia. Pei, tusitusiga, ata, lisi, ma isi. 
<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>

Tulaga

E leai se fa'aogaina fa'aletonu mo vaega o le tapoleni, e tatau la ona e fa'aopoopoina se tasi o vasega fa'aopoopo i lalo;

  • .offcanvas-starttu'u ese le tapoleni i le agavale o le va'aiga (fa'aali i luga)
  • .offcanvas-endtu'u le tapoleni i le itu taumatau o le va'aiga
  • .offcanvas-toptu'u le tapoleni i le pito i luga ole va'aiga
  • .offcanvas-bottomtu'u le tapoleni ile pito i lalo ole va'aiga

Fa'ata'ita'i fa'ata'ita'iga pito i luga, taumatau, ma lalo i lalo.

Laupepa pito i luga
... 
<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>
Fa'atau sa'o
... 
<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>
Tapena pito i lalo
... 
<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>

Fa'aola

E fa'aletonu le ta'avaleina o le <body>elemene pe a iloa atu se tapoleni ma lona tua. Fa'aoga le data-bs-scrolluiga e sui ai le <body>ta'avale ma fa'asolo data-bs-backdropi tua.

E valivali i le ta'avale

Taumafai e ta'ai le isi vaega o le itulau e va'ai i le fa'atinoga o lenei filifiliga.

Offcanvas ma tua

.....

Fa'ata'atia i tua ma ta'ai

Taumafai e ta'ai le isi vaega o le itulau e va'ai i le fa'atinoga o lenei filifiliga.

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

Avanoa

Talu ai ona o le vaega o le offcanvas e fa'atatau i se fa'atalanoaga fa'apitoa, ia mautinoa e fa'aopoopo aria-labelledby="..."—fa'asino i le ulutala offcanvas—i .offcanvas. Manatua e te le mana'omia le fa'aopoopo role="dialog"talu ai ua uma ona matou fa'aopoopoina e ala i le JavaScript.

Sass

Fuafuaga

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

Fa'aoga

O le offcanvas plugin e faʻaaogaina ni nai vasega ma uiga e taulimaina ai le siiina mamafa:

  • .offcanvasnana le anotusi
  • .offcanvas.showfa'aalia le anotusi
  • .offcanvas-startnatia le tapoleni i le agavale
  • .offcanvas-endnatia le tapoleni i le itu taumatau
  • .offcanvas-bottomnatia le tapoleni i le pito i lalo

Fa'aopoopo se fa'amau fa'ate'a fa'atasi ma le data-bs-dismiss="offcanvas"uiga, lea e fa'aoso ai le fa'atinoga o le JavaScript. Ia mautinoa e faʻaaoga le <button>elemene mo le amio talafeagai i masini uma.

E ala i fa'amaumauga uiga

Fa'aopoopo data-bs-toggle="offcanvas"ma a data-bs-targetpo'o hrefle elemene e otometi lava ona tu'u le pule o le tasi elemene i fafo. E data-bs-targettalia e le uiga le CSS filifilia e fa'aoga le offcanvas i. Ia mautinoa e fa'aopoopo le vasega offcanvasi le elemene offcanvas. Afai e te mana'o e le'i tatalaina, fa'aopoopo le vasega fa'aopoopo show.

E ala i le JavaScript

Fa'aaga ma le lima ile:

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

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-bs-, pei o le data-bs-backdrop="".

Igoa Ituaiga Fa'atonu Fa'amatalaga
backdrop boolean true Fa'apipi'i se ata pito i tua ile tino a'o tatala le tapoleni
keyboard boolean true Tapuni le tapoleni pe a oomi le ki sola ese
scroll boolean false Fa'ataga le ta'avale a le tino a'o tatala le tapoleni

Metotia

Metotia ma suiga e le tutusa

O metotia API uma e le fetaui ma amata se suiga . Latou te toe fo'i atu i le tagata telefoni i le taimi lava e amata ai le suiga ae le'i uma . E le gata i lea, o le a le amanaʻiaina se auala e valaʻau ai i se vaega o suiga .

Va'ai la matou pepa JavaScript mo nisi fa'amatalaga .

Fa'aagaoioia lau anotusi e avea o se elemene offcanvas. Talia se filifiliga faitalia object.

E mafai ona e fatuina se faʻataʻitaʻiga offcanvas ma le faufale, mo se faʻataʻitaʻiga:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metotia Fa'amatalaga
toggle Su'e se elemene i luga ole tapoleni e fa'aalia pe natia. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le elemene offcanvas (fa'atusa a'o le'i tupu le shown.bs.offcanvaspo'o le hidden.bs.offcanvasmea na tupu).
show Fa'aalia se elemene o le tapoleni. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le elemene offcanvas (fa'atusa a'o le'i tupu le shown.bs.offcanvasmea na tupu).
hide Natia se elemene ese. Toe fo'i i le tagata vala'au a'o le'i natia le elemene offcanvas (fa'atusa a'o le'i tupu le hidden.bs.offcanvasmea na tupu).
getInstance Metotia static e mafai ai e oe ona maua le offcanvas faʻataʻitaʻiga e fesoʻotaʻi ma se elemene DOM
getOrCreateInstance Metotia static e mafai ai ona e maua le faʻataʻitaʻiga offcanvas e fesoʻotaʻi ma se elemene DOM, poʻo le fatuina o se mea fou i le tulaga e leʻi amataina.

Mea na tutupu

O le vasega offcanvas a Bootstrap o lo'o fa'aalia ai ni nai mea na tutupu mo le fa'aogaina o galuega i fafo.

Ituaiga mea na tupu Fa'amatalaga
show.bs.offcanvas E mu vave lenei mea pe a showvalaʻau le auala faʻataʻitaʻiga.
shown.bs.offcanvas Ole mea lea e fa'ate'aina pe a fa'aalia se elemene offcanvas i le tagata fa'aoga (e fa'atali mo suiga CSS e fa'auma).
hide.bs.offcanvas O lenei mea na tupu e faʻamalo vave pe a hidevalaʻau le metotia.
hidden.bs.offcanvas O lenei mea e tupu pe a natia se elemene offcanvas mai le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})