Treci la conținutul principal Treceți la navigarea documentelor
Check
in English

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 marginea din stânga, dreapta, de sus sau 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.

Offcanvas
Conținutul pentru offcanvas ajunge aici. Puteți plasa aproape orice componentă Bootstrap sau elemente personalizate aici.
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 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
Offcanvas
Un text ca substituent. În viața reală poți avea elementele pe care le-ai ales. Like, text, imagini, liste 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>

Derularea corpului

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

Offcanvas cu derulare corporală

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

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>

Defilare corporală și fundal

De asemenea, puteți activa <body>derularea cu un fundal vizibil.

Fundal cu defilare

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

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>

Fundal static

Când fundalul este setat la static, offcanvasul nu se va închide când faceți clic în afara acestuia.

Offcanvas
Nu voi închide dacă faceți clic în afara mea.
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>

Pânză întunecată

Adăugat în v5.2.0

Schimbați aspectul offcanvaselor cu utilitare pentru a le potrivi mai bine cu diferite contexte, cum ar fi barele de navigare întunecate. Aici adăugăm .text-bg-darkla .offcanvasși .btn-close-whitela .btn-closepentru un stil adecvat cu o pânză întunecată. Dacă aveți meniuri derulante, luați în considerare adăugarea și .dropdown-menu-darkla .dropdown-menu.

Offcanvas

Plasați conținut offcanvas aici.

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>

Receptiv

Adăugat în v5.2.0

Clasele responsive offcanvas ascund conținutul din afara ferestrei de vizualizare de la un punct de întrerupere specificat și în jos. Peste acel punct de întrerupere, conținutul din interior se va comporta ca de obicei. De exemplu, .offcanvas-lgascunde conținutul într-un offcanvas sub punctul de lgîntrerupere, dar arată conținutul deasupra punctului de lgîntrerupere.

Redimensionați browserul pentru a afișa comutatorul responsiv offcanvas.
Offcanvas receptiv

Acesta este conținut într-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>

Clasele responsive offcanvas sunt disponibile pentru fiecare punct de întrerupere.

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

Plasarea

Nu există o plasare prestabilită 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.

Top din pânză
...
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>
Offcanvas dreapta
...
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>
Parte de jos din pânză
...
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>

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.

CSS

Variabile

Adăugat în v5.2.0

Ca parte a abordării în evoluție a variabilelor CSS a Bootstrap, offcanvas utilizează acum variabile CSS locale on .offcanvaspentru personalizare îmbunătățită în timp real. Valorile pentru variabilele CSS sunt setate prin Sass, astfel încât personalizarea Sass este încă acceptată.

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

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

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-topascunde offpânza în partea de sus
  • .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

Comutare

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.

Respingeți

Demiterea poate fi realizată cu dataatributul de pe un buton din offcanvas , așa cum se arată mai jos:

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

sau pe un buton din afara pânzei utilizând după data-bs-targetcum se arată mai jos:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Deși sunt acceptate ambele moduri de a închide un offcanvas, rețineți că închiderea din afara unui offcanvas nu se potrivește cu modelul (modal) de dialog ARIA Authoring Practices Guide . Fă asta pe propriul tău risc.

Prin JavaScript

Activați manual cu:

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

Opțiuni

Deoarece opțiunile pot fi transmise prin atribute de date sau JavaScript, puteți adăuga un nume de opțiune la data-bs-, ca în data-bs-animation="{value}". Asigurați-vă că schimbați tipul de caz al numelui opțiunii din „ camelCase ” în „ kebab-case ” atunci când treceți opțiunile prin atributele de date. De exemplu, utilizați data-bs-custom-class="beautifier"în loc de data-bs-customClass="beautifier".

Începând cu Bootstrap 5.2.0, toate componentele acceptă un atribut de date rezervat experimentaldata-bs-config care poate găzdui configurarea simplă a componentelor ca șir JSON. Când un element are data-bs-config='{"delay":0, "title":123}'și data-bs-title="456"atribute, valoarea finală titleva fi 456și atributele de date separate vor înlocui valorile date pe data-bs-config. În plus, atributele de date existente pot găzdui valori JSON precum data-bs-delay='{"show":0,"hide":150}'.

Nume Tip Mod implicit Descriere
backdrop boolean sau șirulstatic true Aplicați un fundal pe corp în timp ce offcanvas este deschis. Ca alternativă, specificați staticpentru un fundal care nu închide offcanvasul atunci când faceți clic.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metodă Descriere
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.
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.offcanvasevenimentului).
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.offcanvasevenimentului).
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.offcanvassau să hidden.bs.offcanvasapară).

Evenimente

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

Tip de eveniment Descriere
hide.bs.offcanvas Acest eveniment este declanșat imediat când hidemetoda 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).
hidePrevented.bs.offcanvas Acest eveniment este declanșat atunci când este afișat offcanvasul, fundalul său este staticși se efectuează un clic în afara offcanvasului. Evenimentul este declanșat și atunci când tasta de evacuare este apăsată și keyboardopțiunea este setată la false.
show.bs.offcanvas Acest eveniment se declanșează imediat când showeste 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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})