Salta à u cuntenutu principale Salta à a navigazione di documenti
in English

Offcanvas

Custruite barre laterali nascosti in u vostru prughjettu per a navigazione, shopping carts, è più cù uni pochi di classi è u nostru plugin JavaScript.

In sta pagina

Cumu funziona

Offcanvas hè un cumpunente di a barra laterale chì pò esse cambiatu via JavaScript per apparisce da u latu left, right, o bottom of the viewport. I buttoni o l'ancore sò usati cum'è attivatori chì sò attaccati à elementi specifichi chì toggle, è l' dataattributi sò usati per invucà u nostru JavaScript.

  • Offcanvas sparte un pocu di u listessu codice JavaScript cum'è modali. Conceptually, sò abbastanza simili, ma sò plugins separati.
  • In listessu modu, alcune variabili Sass fonte per i stili è e dimensioni di offcanvas sò ereditati da e variàbili di u modale.
  • Quandu si mostra, offcanvas include un sfondate predeterminatu chì pò esse clicatu per ammuccià l'offcanvas.
  • Simile à i modali, solu un offcanvas pò esse mostratu à tempu.

A testa alta ! Data cumu CSS gestisce l'animazioni, ùn pudete micca aduprà margino translatenantu à un .offcanvaselementu. Invece, aduprate a classa cum'è un elementu di imballaggio indipendente.

L'effettu di l'animazione di stu cumpunente dipende da a prefers-reduced-motionmedia query. Vede a sezione di movimentu ridottu di a nostra documentazione d'accessibilità .

Esempii

Cumpunenti offcanvas

Quì sottu hè un esempiu offcanvas chì hè mostratu per difettu (via .showon .offcanvas). Offcanvas include supportu per un header cù un buttone chjusu è una classa di corpu opzionale per qualchì iniziale padding. Suggeremu d'include intestazioni offcanvas cù azioni di licenzià ogni volta chì hè pussibule, o furnisce una azione esplicita di licenzià.

Offcanvas
U cuntenutu per l'offcanvas va quì. Pudete mette quasi ogni cumpunente Bootstrap o elementi persunalizati quì. 
<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>

Demo live

Aduprate i buttoni sottu per vede è ammuccià un elementu offcanvas via JavaScript chì cambia a .showclassa nantu à un elementu cù a .offcanvasclasse.

  • .offcanvasoculta u cuntenutu (predeterminatu)
  • .offcanvas.showmostra u cuntenutu

Pudete aduprà un ligame cù l' hrefattributu, o un buttone cù l' data-bs-targetattributu. In i dui casi, data-bs-toggle="offcanvas"hè necessariu.

Link cù href
Offcanvas
Qualchì testu cum'è placeholder. In a vita reale pudete avè l'elementi chì avete sceltu. Like, testu, imagine, listi, etc. 
<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>

Placement

Ùn ci hè micca piazzamentu predeterminatu per i cumpunenti offcanvas, cusì duvete aghjunghje una di e classi modificatori sottu;

  • .offcanvas-startmette fora di tela à a manca di a finestra (mostra sopra)
  • .offcanvas-endmette offcanvas à a diritta di u viewport
  • .offcanvas-topmette offcanvas in cima di u viewport
  • .offcanvas-bottommette offcanvas in u fondu di u viewport

Pruvate l'esempii in cima, destra è sottu sottu.

Top offcanvas
... 
<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 ghjustu
... 
<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 fondu
... 
<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>

Fondu

U scorrimentu di l' <body>elementu hè disattivatu quandu un offcanvas è u so fondu sò visibili. Aduprate l' data-bs-scrollattributu per cambià <body>u scrolling è data-bs-backdropper cambià u sfondate.

Culuratu cù scrolling

Pruvate di scrolling u restu di a pagina per vede sta opzione in azzione.

Offcanvas cù sfondate

.....

In fondu cù u scrolling

Pruvate di scrolling u restu di a pagina per vede sta opzione in azzione.

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

L'accessibilità

Siccomu u pannellu offcanvas hè cuncettualmente un dialogu modale, assicuratevi di aghjunghje aria-labelledby="..."- in riferimentu à u titulu offcanvas - à .offcanvas. Nota chì ùn avete micca bisognu di aghjunghje role="dialog"postu chì l'avemu digià aghjustatu via JavaScript.

Sass

Variabili

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

Usu

U plugin offcanvas utilizeghja uni pochi di classi è attributi per trattà u pesu pesante:

  • .offcanvasoculta u cuntenutu
  • .offcanvas.showmostra u cuntenutu
  • .offcanvas-startnasconde l'offcanvas a sinistra
  • .offcanvas-endnasconde l'offcanvas a destra
  • .offcanvas-bottomnasconde l'offcanvas in u fondu

Aghjunghjite un buttone di scartà cù l' data-bs-dismiss="offcanvas"attributu, chì attiva a funziunalità JavaScript. Assicuratevi di utilizà l' <button>elementu cun ellu per un cumpurtamentu propiu in tutti i dispositi.

Via attributi di dati

Aghjunghjite data-bs-toggle="offcanvas"è a data-bs-targeto hrefà l'elementu per assignà automaticamente u cuntrollu di un elementu offcanvas. L' data-bs-targetattributu accetta un selettore CSS per applicà l'offcanvas. Assicuratevi di aghjunghje a classa offcanvasà l'elementu offcanvas. Se vulete chì l'apertura predefinita, aghjunghje a classa supplementaria show.

Via JavaScript

Abilita manualmente cù:

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

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-bs-, cum'è in data-bs-backdrop="".

Nome Tipu Default Descrizzione
backdrop booleanu true Applica un sfondate nantu à u corpu mentre offcanvas hè apertu
keyboard booleanu true Chiude l'offcanvas quandu si preme a chjave di escape
scroll booleanu false Permette u scorrimentu di u corpu mentre offcanvas hè apertu

I metudi

Metudi asincroni è transizioni

Tutti i metudi API sò asincroni è cumincianu una transizione . Ritornanu à u chjamante appena a transizione hè iniziata, ma prima chì finisce . Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .

Vede a nostra documentazione JavaScript per più infurmazione .

Attiva u vostru cuntenutu cum'è un elementu offcanvas. Accetta opzioni opzionali object.

Pudete creà una istanza offcanvas cù u custruttore, per esempiu:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metudu Descrizzione
toggle Cambia un elementu offcanvas per mostratu o oculatu. Ritorna à u chjamante prima chì l'elementu offcanvas hè statu effettivamente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.offcanvaso hidden.bs.offcanvassi faci).
show Mostra un elementu offcanvas. Ritorna à u chjamante prima chì l'elementu offcanvas hè statu veramente mostratu (vale à dì prima chì l' shown.bs.offcanvasavvenimentu si faci).
hide Nasconde un elementu offcanvas. Ritorna à u chjamante prima chì l'elementu offcanvas hè statu oculatu (vale à dì prima chì l' hidden.bs.offcanvasavvenimentu si faci).
getInstance Metudu staticu chì permette di ottene l'istanza offcanvas assuciata à un elementu DOM
getOrCreateInstance Metudu staticu chì vi permette di uttene l'istanza offcanvas assuciata à un elementu DOM, o creà un novu in casu ùn hè micca inizializatu

Avvenimenti

A classe offcanvas di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità offcanvas.

Tipu di avvenimentu Descrizzione
show.bs.offcanvas Questu avvenimentu spara immediatamente quandu u showmetudu di istanza hè chjamatu.
shown.bs.offcanvas Questu avvenimentu hè sparatu quandu un elementu offcanvas hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
hide.bs.offcanvas Stu avvenimentu hè sparatu immediatamente quandu u hidemetudu hè statu chjamatu.
hidden.bs.offcanvas Questu avvenimentu hè sparatu quandu un elementu offcanvas hè statu oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})