Offcanvas

Construiți bare laterale ascunse în proiectul dvs. pentru navigare, coșuri de cumpărături și multe altele cu câteva clase și pluginul nostru JavaScript.

Pe aceasta pagina

Cum functioneaza

Offcanvas este o componentă a barei laterale care poate fi comutată prin JavaScript pentru a apărea din stânga, dreapta sau marginea de jos a ferestrei de vizualizare. Butoanele sau ancorele sunt folosite ca declanșatori care sunt atașate la anumite elemente pe care le comutați, iar dataatributele sunt folosite pentru a invoca JavaScript-ul nostru.

Offcanvas partajează o parte din același cod JavaScript ca modal. Conceptual, sunt destul de asemănătoare, dar sunt pluginuri separate.
În mod similar, unele variabile Sass sursă pentru stilurile și dimensiunile offcanvas sunt moștenite din variabilele modalului.
Când este afișat, offcanvas include un fundal implicit pe care se poate face clic pentru a ascunde offcanvasul.
Similar cu modalele, doar un singur canvas poate fi afișat la un moment dat.

Atenție! Având în vedere modul în care CSS gestionează animațiile, nu puteți utiliza marginsau translatepe un .offcanvaselement. În schimb, utilizați clasa ca element independent de împachetare.

Efectul de animație al acestei componente depinde de prefers-reduced-motioninterogarea media. Consultați secțiunea cu mișcare redusă a documentației noastre de accesibilitate .

Exemple

Componente offcanvas

Mai jos este un exemplu offcanvas care este afișat implicit (prin .showpornit .offcanvas). Offcanvas include suport pentru un antet cu un buton de închidere și o clasă de corp opțională pentru unele inițiale padding. Vă sugerăm să includeți antete offcanvas cu acțiuni de respingere ori de câte ori este posibil sau să furnizați o acțiune explicită de respingere.

Conținutul pentru offcanvas ajunge aici. Puteți plasa aproape orice componentă Bootstrap sau elemente personalizate aici.

<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

Utilizați butoanele de mai jos pentru a afișa și a ascunde un element offcanvas prin JavaScript care comută .showclasa într-un element cu .offcanvasclasa.

.offcanvasascunde conținutul (implicit)
.offcanvas.showafișează conținut

Puteți folosi un link cu hrefatributul sau un buton cu data-bs-targetatributul. În ambele cazuri, data-bs-toggle="offcanvas"este necesar.

Link cu href

Un text ca substituent. În viața reală poți avea elementele pe care le-ai ales. Like, text, imagini, liste 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>

Plasarea

Nu există o plasare implicită pentru componentele offcanvas, așa că trebuie să adăugați una dintre clasele modificatoare de mai jos;

.offcanvas-startplasează offcanvas în partea stângă a ferestrei de vizualizare (arată mai sus)
.offcanvas-endplasează offcanvas în dreapta ferestrei de vizualizare
.offcanvas-topplasează offcanvas în partea de sus a ferestrei de vizualizare
.offcanvas-bottomplasează offcanvas în partea de jos a ferestrei de vizualizare

Încercați exemplele de sus, din dreapta și de jos de mai jos.

...

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

Pe fundal

Derularea <body>elementului este dezactivată atunci când sunt vizibile un offcanvas și fundalul acestuia. Utilizați data-bs-scrollatributul pentru a comuta <body>derularea și data-bs-backdroppentru a comuta fundalul.

Încercați să defilați restul paginii pentru a vedea această opțiune în acțiune.

.....

Încercați să defilați restul paginii pentru a vedea această opțiune în acțiune.

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

Accesibilitate

Deoarece panoul offcanvas este conceptual un dialog modal, asigurați-vă că adăugați aria-labelledby="..."— făcând referire la titlul offcanvas — la .offcanvas. Rețineți că nu trebuie să adăugați role="dialog", deoarece îl adăugăm deja prin JavaScript.

Sass

Variabile

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

Utilizare

Pluginul offcanvas utilizează câteva clase și atribute pentru a face față sarcinilor grele:

.offcanvasascunde conținutul
.offcanvas.showarata continutul
.offcanvas-startascunde offcanvasul din stânga
.offcanvas-endascunde offcanvasul din dreapta
.offcanvas-bottomascunde offcanvasul de jos

Adăugați un buton de respingere cu data-bs-dismiss="offcanvas"atributul, care declanșează funcționalitatea JavaScript. Asigurați-vă că utilizați <button>elementul cu acesta pentru un comportament adecvat pe toate dispozitivele.

Prin atribute de date

Adăugați data-bs-toggle="offcanvas"și a data-bs-targetsau hrefla element pentru a atribui automat controlul unui element offcanvas. Atributul data-bs-targetacceptă un selector CSS la care să se aplice offcanvasul. Asigurați-vă că adăugați clasa offcanvasla elementul offcanvas. Dacă doriți să se deschidă implicit, adăugați clasa suplimentară show.

Prin JavaScript

Activați manual cu:

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-bs-, ca în data-bs-backdrop="".

Nume	Tip	Mod implicit	Descriere
`backdrop`	boolean	`true`	Aplicați un fundal pe corp în timp ce offcanvas este deschis
`keyboard`	boolean	`true`	Închide offcanvas când este apăsată tasta Escape
`scroll`	boolean	`false`	Permite derularea corpului în timp ce offcanvas este deschis

Metode

Metode și tranziții asincrone

Toate metodele API sunt asincrone și încep o tranziție . Ei revin la apelant imediat ce tranziția este începută, dar înainte ca aceasta să se încheie . În plus, un apel de metodă pentru o componentă de tranziție va fi ignorat .

Consultați documentația noastră JavaScript pentru mai multe informații .

Activează conținutul dvs. ca element offcanvas. Acceptă opțiuni opționale object.

Puteți crea o instanță offcanvas cu constructorul, de exemplu:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Metodă	Descriere
`toggle`	Comută un element offcanvas la afișat sau ascuns. Revine la apelant înainte ca elementul offcanvas să fi fost efectiv afișat sau ascuns (adică înainte ca evenimentul `shown.bs.offcanvas`sau să `hidden.bs.offcanvas`apară).
`show`	Afișează un element offcanvas. Se întoarce la apelant înainte ca elementul offcanvas să fie afișat efectiv (adică înainte de apariția `shown.bs.offcanvas`evenimentului).
`hide`	Ascunde un element offcanvas. Se întoarce la apelant înainte ca elementul offcanvas să fi fost efectiv ascuns (adică înainte de apariția `hidden.bs.offcanvas`evenimentului).
`getInstance`	Metodă statică care vă permite să obțineți instanța offcanvas asociată cu un element DOM
`getOrCreateInstance`	Metodă statică care vă permite să obțineți instanța offcanvas asociată cu un element DOM sau să creați unul nou în cazul în care nu a fost inițializat

Evenimente

Clasa offcanvas a Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea offcanvas.

Tip de eveniment	Descriere
`show.bs.offcanvas`	Acest eveniment se declanșează imediat când `show`este apelată metoda instanței.
`shown.bs.offcanvas`	Acest eveniment este declanșat atunci când un element offcanvas a fost făcut vizibil pentru utilizator (va aștepta finalizarea tranzițiilor CSS).
`hide.bs.offcanvas`	Acest eveniment este declanșat imediat când `hide`metoda a fost apelată.
`hidden.bs.offcanvas`	Acest eveniment este declanșat atunci când un element offcanvas a fost ascuns utilizatorului (va aștepta finalizarea tranzițiilor CSS).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

Cum functioneaza

Exemple

Componente offcanvas

Offcanvas

Demo live

Offcanvas

Plasarea

Top din pânză

Offcanvas dreapta

Parte de jos din pânză

Pe fundal

Colorate cu defilare

Offcanvas cu fundal

Pe fundal cu defilare

Accesibilitate

Sass

Variabile

Utilizare

Prin atribute de date

Prin JavaScript

Opțiuni

Metode

Metode și tranziții asincrone

Evenimente