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 o se itu e mafai ona fesuia'i e ala i le JavaScript e fa'aalia mai le agavale, taumatau, pito i luga, po'o le pito i lalo o le 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.

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.

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

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

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.

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>

Ta'avale tino

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 mafai ai ona <body>ta'avale.

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

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>

Ta'avale tino ma tua

E mafai fo'i ona e <body>fa'agaoioi le ta'avale ma se fa'aaliga manino.

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

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>

Fa'aola fa'atete'e

A tu'u le ata i tua, o le a le tapunia le tapoleni pe a kiliki i fafo.

O le a ou le tapunia pe a e kiliki i fafo o aʻu.

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>

Pogisa i luga ole tapoleni

Fa'aopoopo i le v5.2.0

Suia foliga o ata mata'utia ma mea aoga ina ia fetaui lelei i tulaga eseese e pei o navbars pogisa. O iinei tatou te faʻaopoopo .text-bg-darki le .offcanvasma .btn-close-whitele .btn-closemo le faʻaogaina lelei ma se tapoleni pogisa. Afai e iai sau pa'u i lalo, mafaufau e fa'aopoopo .dropdown-menu-darki le .dropdown-menu.

Tu'u ese anotusi iinei.

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>

Talia

Fa'aopoopo i le v5.2.0

E natia e vasega i fafo o le canvas mea o lo'o i fafo atu o le va'aiga mai se va'aiga ma'oti ma lalo. I luga a'e o lena tulaga malolo, o mea i totonu o le a amio e pei ona masani ai. Mo se fa'ata'ita'iga, .offcanvas-lgnatia mea i totonu o se tapoleni i lalo ifo o le lgva'aiga, ae fa'aalia le mea o lo'o i luga a'e o le lgva'aiga.

Toe fa'atele lau su'esu'ega e fa'aali atu ai le kili o le canvas tali.

O lo'o i totonu o le .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>

O lo'o avanoa vasega fa'asaga i fafo mo vaega ta'itasi.

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

Tulaga

E leai se fa'aoga fa'aletonu mo vaega o le tapoleni, e tatau 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.

...

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>

...

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>

...

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>

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.

CSS

Fuafuaga

Fa'aopoopo i le v5.2.0

I le avea ai o se vaega o le suiga o le CSS suiga a le Bootstrap, ua fa'aogaina nei e le offcanvas le fa'aogaina o le CSS fa'apitonu'u .offcanvasmo le fa'aleleia o le fa'avasegaina o taimi moni. O tau mo le CSS fesuiaiga e faʻatulagaina e ala i le Sass, o lea o loʻo lagolagoina pea le Sass customization.

  --#{$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 fesuiaiga

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

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-topnatia le tapoleni i luga
.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

Toggle

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.

Fa'ate'a

E mafai ona ausia le fa'ate'aina i le datauiga i luga o se fa'amau i totonu ole tapoleni e pei ona fa'aalia i lalo:

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

po'o luga o se fa'amau i fafo atu o le tapoleni e fa'aaoga ai le data-bs-targetfa'ata'ita'iga i lalo:

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

A'o lagolagoina uma auala e fa'ate'aina ai se tapoleni, ia manatua o le fa'ate'aina mai fafo o le tapoleni e le fetaui ma le fa'ata'ita'iga (modal) fa'asologa o le ARIA Authoring Practices Guide . Fai lenei mea i lou lava tulaga lamatia.

E ala i le JavaScript

Fa'aaga ma le lima ile:

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

Filifiliga

A'o mafai ona pasia filifiliga e ala i fa'amatalaga uiga po'o le JavaScript, e mafai ona e fa'aopoopoina se igoa filifiliga i le data-bs-, pei o le data-bs-animation="{value}". Ia mautinoa e sui le ituaiga mataupu o le igoa filifiliga mai le " CamelCase " i le " kebab-case " pe a pasia filifiliga e ala i faʻamatalaga uiga. Mo se faʻataʻitaʻiga, faʻaaoga data-bs-custom-class="beautifier"nai lo le data-bs-customClass="beautifier".

E pei o le Bootstrap 5.2.0, o vaega uma e lagolagoina se faʻataʻitaʻiga faʻaagaga faʻamaumauga uiga data-bs-confige mafai ona faʻapipiʻi faigofie vaega faʻapipiʻi o se manoa JSON. Afai ei ai se elemene data-bs-config='{"delay":0, "title":123}'ma data-bs-title="456"uiga, o le titletau mulimuli o le ai ai 456ma o faʻamatalaga faʻamatalaga uiga ese o le a faʻamalo ai tau o loʻo tuʻuina atu ile data-bs-config. E le gata i lea, o faʻamaumauga o loʻo i ai nei e mafai ona faʻapipiʻi JSON tau pei o data-bs-delay='{"show":0,"hide":150}'.

Igoa	Ituaiga	Fa'atonu	Fa'amatalaga
`backdrop`	boolean po'o le manoa`static`	`true`	Fa'apipi'i se ata pito i tua ile tino a'o tatala le tapoleni. I le isi itu, fa'amaoti `static`mo se fa'amalama e le tapunia ai le tapoleni pe a kiliki.
`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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

Metotia	Fa'amatalaga
`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 e oe ona maua le offcanvas faʻataʻitaʻiga e fesoʻotaʻi ma se elemene DOM, pe fatuina se mea fou pe a leʻi amataina.
`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.offcanvas`mea 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.offcanvas`mea na tupu).
`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.offcanvas`po'o le `hidden.bs.offcanvas`mea na tupu).

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
`hide.bs.offcanvas`	O lenei mea na tupu e faʻamalo vave pe a `hide`valaʻ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).
`hidePrevented.bs.offcanvas`	E fa'amu le mea lea pe a fa'aalia le tapoleni ese, o lona tuaa o lo'o i ai `static`ma le kiliki i fafo o le tapoleni e fa'atino. E fa'amu foi le mea na tupu pe a oomi le ki sola ese ma `keyboard`seti le filifiliga i `false`.
`show.bs.offcanvas`	E mu vave lenei mea pe a `show`valaʻ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).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

Fa'alavalava

E faapefea ona galue

Faataitaiga

Vaega o le tapoleni

Fa'alavalava

Live demo

Fa'alavalava

Ta'avale tino

Offcanvas ma le ta'avale a le tino

Ta'avale tino ma tua

Fa'afa'afa'ai ma ta'avale

Fa'aola fa'atete'e

Fa'alavalava

Pogisa i luga ole tapoleni

Fa'alavalava

Talia

Tali i luga ole tapoleni

Tulaga

Laupepa pito i luga

Fa'atau sa'o

Tapena pito i lalo

Avanoa

CSS

Fuafuaga

Sass fesuiaiga

Fa'aoga

E ala i fa'amaumauga uiga

Toggle

Fa'ate'a

E ala i le JavaScript

Filifiliga

Metotia

Metotia ma suiga e le tutusa

Mea na tutupu