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, superior 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í.

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>

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.

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>

Desplaçament corporal

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 activar el <body>desplaçament.

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

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>

Desplaçament corporal i teló de fons

També podeu habilitar el <body>desplaçament amb un teló de fons visible.

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

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>

Teló de fons estàtic

Quan el fons s'estableix com a estàtic, l'offcanvas no es tancarà en fer clic fora d'ell.

No tancaré si feu clic fora de mi.

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>

Offcanvas fosc

Afegit a la v5.2.0

Canvieu l'aspecte dels llenços amb utilitats per adaptar-los millor a diferents contextos, com ara barres de navegació fosques. Aquí afegim .text-bg-darka .offcanvasi .btn-close-whiteper .btn-closea un estil adequat amb un llenç fosc. Si teniu menús desplegables, penseu a afegir-los també .dropdown-menu-darka .dropdown-menu.

Col·loca aquí contingut fora del llenç.

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>

Responent

Afegit a la v5.2.0

Les classes offcanvas responsives amaguen contingut fora de la finestra gràfica des d'un punt d'interrupció especificat i cap avall. Per sobre d'aquest punt d'interrupció, els continguts es comportaran com de costum. Per exemple, .offcanvas-lgamaga el contingut en un llenç fora del lgpunt d'interrupció, però mostra el contingut a sobre del punt d' lginterrupció.

Canvieu la mida del vostre navegador per mostrar el commutador offcanvas responsiu.

Això és contingut dins d'un .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>

Les classes responsives offcanvas estan disponibles per a cada punt d'interrupció.

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

Col·locació

No hi ha cap ubicació predeterminada per als components fora del llenç, de manera que heu d'afegir una de les classes modificadores 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ó.

...

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>

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.

CSS

Les variables

Afegit a la v5.2.0

Com a part de l'enfocament de variables CSS en evolució de Bootstrap, ara offcanvas utilitza variables CSS locals activades .offcanvasper a una personalització millorada en temps real. Els valors de les variables CSS s'estableixen mitjançant Sass, de manera que la personalització de Sass encara és compatible.

  --#{$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};

Variables Sass

$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-topamaga el llenç fora de la part superior
.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 l'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 l'exterior d'un llenç no coincideix amb el patró de diàleg (modal) de la Guia de pràctiques de creació d'ARIA . Fes-ho sota el teu propi risc.

Mitjançant JavaScript

Habilita manualment amb:

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

Opcions

Com que les opcions es poden passar mitjançant atributs de dades o JavaScript, podeu afegir un nom d'opció a data-bs-, com a data-bs-animation="{value}". Assegureu-vos de canviar el tipus de cas del nom de l'opció de " camelCase " a " kebab-case " quan passeu les opcions mitjançant atributs de dades. Per exemple, utilitzeu data-bs-custom-class="beautifier"en comptes de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, tots els components admeten un atribut de dades reservades experimentalsdata-bs-config que pot albergar una configuració senzilla de components com a cadena JSON. Quan un element té data-bs-config='{"delay":0, "title":123}'i data-bs-title="456"atributs, el titlevalor final serà 456i els atributs de dades independents substituiran els valors donats a data-bs-config. A més, els atributs de dades existents poden albergar valors JSON com data-bs-delay='{"show":0,"hide":150}'.

Nom	Tipus	Per defecte	Descripció
`backdrop`	booleà o la cadena`static`	`true`	Apliqueu un teló de fons al cos mentre l'offcanvas està obert. Alternativament, especifiqueu `static`un teló de fons que no tanqui el llenç fora de pantalla quan feu clic.
`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:

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

Mètode	Descripció
`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.
`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).
`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).
`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`

Esdeveniments

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

Tipus d'esdeveniment	Descripció
`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).
`hidePrevented.bs.offcanvas`	Aquest esdeveniment s'activa quan es mostra l'offcanvas, el seu teló de fons `static`i es realitza un clic fora de l'offcanvas. L'esdeveniment també s'activa quan es prem la tecla d'escapament i l' `keyboard`opció s'estableix a `false`.
`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).

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

Offcanvas

Com funciona

Exemples

Components offcanvas

Offcanvas

Demo en directe

Offcanvas

Desplaçament corporal

Offcanvas amb desplaçament corporal

Desplaçament corporal i teló de fons

Teló de fons amb desplaçament

Teló de fons estàtic

Offcanvas

Offcanvas fosc

Offcanvas

Responent

Offcanvas responsiu

Col·locació

Top fora de lona

Offcanvas a la dreta

Fons fora de lona

Accessibilitat

CSS

Les variables

Variables Sass

Ús

Mitjançant atributs de dades

Commuta

Descartar

Mitjançant JavaScript

Opcions

Mètodes

Mètodes asíncrons i transicions

Esdeveniments