Saltar al contingut principal Saltar a la navegació de documents
in English

Offcanvas

Creeu barres laterals amagades al vostre projecte per a la navegació, els carretons de la compra i molt més amb algunes classes i el nostre connector de JavaScript.

En aquesta pàgina

Com funciona

Offcanvas és un component de la barra lateral que es pot canviar mitjançant JavaScript per aparèixer des de la vora esquerra, dreta o inferior de la finestra gràfica. Els botons o ancoratges s'utilitzen com a activadors que s'adjunten a elements específics que activeu i dataels atributs s'utilitzen per invocar el nostre JavaScript.

  • Offcanvas comparteix part del mateix codi JavaScript que els modals. Conceptualment, són força similars, però són complements separats.
  • De la mateixa manera, algunes variables Sass d'origen per als estils i dimensions d'offcanvas s'hereten de les variables del modal.
  • Quan es mostra, offcanvas inclou un fons predeterminat en el qual es pot fer clic per ocultar el offcanvas.
  • De manera semblant als modals, només es pot mostrar un fora de llenç alhora.

Caps amunt! Tenint en compte com CSS gestiona les animacions, no podeu utilitzar marginni translateen un .offcanvaselement. En comptes d'això, utilitzeu la classe com a element d'embolcall independent.

L'efecte d'animació d'aquest component depèn de la prefers-reduced-motionconsulta de mitjans. Consulteu la secció de moviment reduït de la nostra documentació d'accessibilitat .

Exemples

Components offcanvas

A continuació es mostra un exemple fora del llenç que es mostra de manera predeterminada (mitjançant .showon .offcanvas). Offcanvas inclou suport per a una capçalera amb un botó de tancament i una classe de cos opcional per a algunes inicials padding. Us recomanem que inclogueu capçaleres fora del llenç amb accions d'ignorar sempre que sigui possible o proporcioneu una acció d'ignoració explícita.

Offcanvas
El contingut de l'offcanvas és aquí. Aquí podeu col·locar gairebé qualsevol component Bootstrap o elements personalitzats. 
<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 en directe

Utilitzeu els botons següents per mostrar i amagar un element fora del llenç mitjançant JavaScript que alterna la .showclasse a un element amb la .offcanvasclasse.

  • .offcanvasamaga el contingut (per defecte)
  • .offcanvas.showmostra contingut

Podeu utilitzar un enllaç amb l' hrefatribut o un botó amb l' data-bs-targetatribut. En ambdós casos, data-bs-toggle="offcanvas"és necessari.

Enllaç amb href
Offcanvas
Algun text com a marcador de posició. A la vida real pots tenir els elements que has triat. M'agrada, text, imatges, llistes, 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>

Col·locació

No hi ha cap ubicació predeterminada per als components offcanvas, de manera que heu d'afegir una de les classes de modificadors a continuació;

  • .offcanvas-startcol·loca fora del llenç a l'esquerra de la finestra gràfica (que es mostra a dalt)
  • .offcanvas-endcol·loca fora del llenç a la dreta de la finestra gràfica
  • .offcanvas-topcol·loca fora del llenç a la part superior de la finestra
  • .offcanvas-bottomcol·loca fora del llenç a la part inferior de la finestra gràfica

Proveu els exemples superior, dret i inferior a continuació.

Top fora de lona
... 
<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 a la dreta
... 
<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>
Fons fora de lona
... 
<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>

Teló de fons

El desplaçament de l' <body>element està desactivat quan un llenç i el seu fons són visibles. Utilitzeu l' data-bs-scrollatribut per alternar el <body>desplaçament i data-bs-backdropel teló de fons.

Acolorit amb desplaçament

Proveu de desplaçar-vos per la resta de la pàgina per veure aquesta opció en acció.

Offcanvas amb teló de fons

.....

Teló de fons amb desplaçament

Proveu de desplaçar-vos per la resta de la pàgina per veure aquesta opció en acció.

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

Accessibilitat

Atès que el tauler fora del llenç és conceptualment un diàleg modal, assegureu-vos d'afegir aria-labelledby="..."—fer referència al títol del llenç— a .offcanvas. Tingueu en compte que no cal que l'afegiu role="dialog", ja que ja l'afegim mitjançant JavaScript.

Sass

Les variables

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

Ús

El connector offcanvas utilitza algunes classes i atributs per gestionar el treball pesat:

  • .offcanvasamaga el contingut
  • .offcanvas.showmostra el contingut
  • .offcanvas-startamaga el llenç fora de l'esquerra
  • .offcanvas-endamaga el llenç fora de la dreta
  • .offcanvas-bottomamaga el llenç fora de la part inferior

Afegiu un botó d'ignorar amb l' data-bs-dismiss="offcanvas"atribut, que activa la funcionalitat de JavaScript. Assegureu-vos d'utilitzar l' <button>element amb ell per a un comportament adequat en tots els dispositius.

Mitjançant atributs de dades

Afegiu data-bs-toggle="offcanvas"i a data-bs-targeto hrefa l'element per assignar automàticament el control d'un element fora del llenç. L' data-bs-targetatribut accepta un selector CSS per aplicar-hi l'offcanvas. Assegureu-vos d'afegir la classe offcanvasa l'element offcanvas. Si voleu que s'obri per defecte, afegiu la classe addicional show.

Mitjançant JavaScript

Habilita manualment amb:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-bs-, com a data-bs-backdrop="".

Nom Tipus Per defecte Descripció
backdrop booleà true Apliqueu un teló de fons al cos mentre l'offcanvas està obert
keyboard booleà true Tanca l'offcanvas quan es prem la tecla d'escapada
scroll booleà false Permet el desplaçament corporal mentre l'offcanvas està obert

Mètodes

Mètodes asíncrons i transicions

Tots els mètodes de l'API són asíncrons i comencen una transició . Tornen a la persona que truca tan bon punt s'inicia la transició però abans que acabi . A més, s'ignorarà una trucada de mètode en un component en transició .

Consulteu la nostra documentació de JavaScript per obtenir més informació .

Activa el teu contingut com a element fora del llenç. Accepta opcions opcionals object.

Podeu crear una instància offcanvas amb el constructor, per exemple:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Mètode Descripció
toggle Commuta un element fora del llenç per mostrar-lo o amagar-lo. Torna a la persona que truca abans que l'element offcanvas hagi estat mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.offcanvaso ).hidden.bs.offcanvas
show Mostra un element fora del llenç. Torna a la persona que truca abans que s'hagi mostrat realment l'element offcanvas (és a dir, abans shown.bs.offcanvasque es produeixi l'esdeveniment).
hide Amaga un element fora del llenç. Torna a la persona que truca abans que l'element offcanvas s'hagi amagat (és a dir, abans hidden.bs.offcanvasque es produeixi l'esdeveniment).
getInstance Mètode estàtic que us permet obtenir la instància offcanvas associada a un element DOM
getOrCreateInstance Mètode estàtic que us permet obtenir la instància offcanvas associada a un element DOM o crear-ne un de nou en cas que no s'hagi inicialitzat

Esdeveniments

La classe offcanvas de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat offcanvas.

Tipus d'esdeveniment Descripció
show.bs.offcanvas Aquest esdeveniment s'activa immediatament quan showes crida al mètode d'instància.
shown.bs.offcanvas Aquest esdeveniment s'activa quan un element fora del llenç s'ha fet visible per a l'usuari (esperarà que finalitzin les transicions CSS).
hide.bs.offcanvas Aquest esdeveniment s'activa immediatament quan hides'ha cridat el mètode.
hidden.bs.offcanvas Aquest esdeveniment s'activa quan un element fora del llenç s'ha amagat per a l'usuari (esperarà que finalitzin les transicions CSS). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})