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.

El contingut de l'offcanvas és aquí. Podeu col·locar gairebé qualsevol component Bootstrap o elements personalitzats aquí.

<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

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

...

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

...

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

...

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

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

.....

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

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;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Ú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

Commuta

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 offcanvas. Assegureu-vos d'afegir la classe offcanvasa l'element offcanvas. Si voleu que s'obri per defecte, afegiu la classe addicional show.

Descartar

L'acomiadament es pot aconseguir amb l' dataatribut d'un botó dins de l'offcanvas , tal com es mostra a continuació:

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

o en un botó fora del llenç mitjançant el data-bs-targetque es mostra a continuació:

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

Tot i que s'admeten ambdues maneres de descartar un llenç extern, tingueu en compte que l'eliminació des de fora d'un llenç no coincideix amb el patró de disseny del diàleg modal WAI-ARIA . Fes-ho sota el teu propi risc.

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.offcanvas`o ).`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.offcanvas`que 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.offcanvas`que 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 una de nova 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 `show`es 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 `hide`s'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...
})

Offcanvas

Com funciona

Exemples

Components offcanvas

Offcanvas

Demo en directe

Offcanvas

Col·locació

Top fora de lona

Offcanvas a la dreta

Fons fora de lona

Teló de fons

Acolorit amb desplaçament

Offcanvas amb teló de fons

Teló de fons amb desplaçament

Accessibilitat

Sass

Les variables

Ús

Mitjançant atributs de dades

Commuta

Descartar

Mitjançant JavaScript

Opcions

Mètodes

Mètodes asíncrons i transicions

Esdeveniments