Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
Check
in English

Offcanvas

V svoj projekt vgradite skrite stranske vrstice za navigacijo, nakupovalne vozičke in drugo z nekaj razredi in našim vtičnikom JavaScript.

Na tej strani

Kako deluje

Offcanvas je komponenta stranske vrstice, ki jo je mogoče preklopiti prek JavaScripta, da se prikaže z levega, desnega, zgornjega ali spodnjega roba vidnega polja. Gumbi ali sidra se uporabljajo kot sprožilci, ki so pripeti na določene elemente, ki jih preklapljate, dataatributi pa se uporabljajo za priklic našega JavaScripta.

  • Offcanvas ima nekaj iste kode JavaScript kot modali. Konceptualno sta si precej podobna, vendar sta ločena vtičnika.
  • Podobno so nekatere izvorne spremenljivke Sass za sloge in dimenzije offcanvas podedovane iz modalnih spremenljivk.
  • Ko je offcanvas prikazan, vključuje privzeto ozadje, ki ga lahko kliknete, da skrijete offcanvas.
  • Podobno kot pri modalih je lahko naenkrat prikazan samo en offcanvas.

Glavo pokonci! Glede na to, kako CSS obravnava animacije, ne morete uporabiti marginali translatena .offcanvaselementu. Namesto tega uporabite razred kot neodvisen ovojni element.

Učinek animacije te komponente je odvisen od prefers-reduced-motionmedijske poizvedbe. Oglejte si razdelek o zmanjšanem gibanju v naši dokumentaciji o dostopnosti .

Primeri

Komponente Offcanvas

Spodaj je primer zunaj platna, ki je privzeto prikazan (prek .showna .offcanvas). Offcanvas vključuje podporo za glavo z gumbom za zapiranje in izbirni razred telesa za nekatere začetnice padding. Predlagamo, da glave offcanvas vključite z dejanji opustitve, kadar koli je to mogoče, ali zagotovite izrecno dejanje opustitve.

Offcanvas
Sem gre vsebina za offcanvas. Tukaj lahko postavite skoraj katero koli komponento Bootstrap ali elemente po meri.
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 v živo

Uporabite spodnje gumbe za prikaz in skrivanje elementa offcanvas prek JavaScripta, ki preklopi .showrazred na elementu z .offcanvasrazredom.

  • .offcanvasskrije vsebino (privzeto)
  • .offcanvas.showprikazuje vsebino

Uporabite lahko povezavo z hrefatributom ali gumb z data-bs-targetatributom. V obeh primerih data-bs-toggle="offcanvas"je potrebno.

Povezava z href
Offcanvas
Nekaj ​​besedila kot ograda. V resničnem življenju lahko imate elemente, ki ste jih izbrali. Všečkajte, besedilo, slike, sezname itd.
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>

Drsenje telesa

Drsenje po <body>elementu je onemogočeno, ko sta vidna izven platna in njegovo ozadje. Uporabite data-bs-scrollatribut, da omogočite <body>drsenje.

Offcanvas s pomikanjem telesa

Poskusite se pomakniti po preostalem delu strani, da vidite to možnost v akciji.

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>

Drsenje telesa in ozadje

Omogočite lahko tudi <body>drsenje z vidnim ozadjem.

Ozadje z drsenjem

Poskusite se pomakniti po preostalem delu strani, da vidite to možnost v akciji.

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>

Statično ozadje

Ko je ozadje nastavljeno na statično, se offcanvas ne bo zaprl, ko kliknete zunaj njega.

Offcanvas
Ne bom zaprl, če kliknete zunaj mene.
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>

Temno brez platna

Dodano v v5.2.0

Spremenite videz offcanvases s pripomočki, da jih bolje uskladite z različnimi konteksti, kot so temne vrstice za krmarjenje. Tukaj dodajamo .text-bg-darkk .offcanvasin .btn-close-whitek .btn-closeza pravilno oblikovanje s temnim offcanvas. Če imate znotraj spustne menije, razmislite o dodajanju .dropdown-menu-darkv .dropdown-menu.

Offcanvas

Tukaj postavite vsebino brez platna.

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>

Odzivna

Dodano v v5.2.0

Odzivni razredi offcanvas skrijejo vsebino zunaj vidnega polja od določene prelomne točke in navzdol. Nad to mejno točko se bo vsebina v njej obnašala kot običajno. Na primer, .offcanvas-lgskrije vsebino v offcanvas pod lgprelomno točko, vendar prikaže vsebino nad lgprelomno točko.

Spremenite velikost brskalnika, da bo prikazan odzivni preklop offcanvas.
Odziven offcanvas

To je vsebina znotraj .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>

Za vsako prelomno točko so na voljo odzivni razredi offcanvas.

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

Umestitev

Za komponente offcanvas ni privzete postavitve, zato morate dodati enega od spodnjih razredov modifikatorjev.

  • .offcanvas-startpostavi offcanvas na levo od vidnega polja (prikazano zgoraj)
  • .offcanvas-endpostavi offcanvas na desno stran vidnega polja
  • .offcanvas-toppostavi offcanvas na vrh vidnega polja
  • .offcanvas-bottompostavi offcanvas na dno vidnega polja

Preizkusite zgornje, desne in spodnje primere spodaj.

Top iz platna
...
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 desno
...
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>
Dno iz platna
...
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>

Dostopnost

Ker je plošča offcanvas konceptualno modalno pogovorno okno, ne pozabite dodati aria-labelledby="..."—ki se nanaša na naslov offcanvas—v .offcanvas. Upoštevajte, da vam ni treba dodajati, role="dialog"saj ga že dodajamo prek JavaScripta.

CSS

Spremenljivke

Dodano v v5.2.0

Kot del Bootstrapovega razvijajočega se pristopa spremenljivk CSS zdaj offcanvas uporablja lokalne spremenljivke CSS .offcanvasza izboljšano prilagajanje v realnem času. Vrednosti za spremenljivke CSS so nastavljene prek Sass, tako da je še vedno podprto tudi prilagajanje Sass.

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

Sass spremenljivke

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

Uporaba

Vtičnik offcanvas uporablja nekaj razredov in atributov za obvladovanje težkega dela:

  • .offcanvasskriva vsebino
  • .offcanvas.showprikazuje vsebino
  • .offcanvas-startskrije offcanvas na levi
  • .offcanvas-endskrije offcanvas na desni
  • .offcanvas-topskrije offcanvas na vrhu
  • .offcanvas-bottomskrije offcanvas na dnu

Dodajte gumb za opustitev z data-bs-dismiss="offcanvas"atributom, ki sproži funkcijo JavaScript. Ne pozabite uporabiti <button>elementa z njim za pravilno delovanje v vseh napravah.

Preko podatkovnih atributov

Preklopi

Dodajte data-bs-toggle="offcanvas"in data-bs-targetali hrefelementu, da samodejno dodelite nadzor nad enim elementom offcanvas. Atribut data-bs-targetsprejme izbirnik CSS za uporabo offcanvas. Ne pozabite dodati razreda offcanvaselementu offcanvas. Če želite, da je privzeto odprt, dodajte dodatni razred show.

Odpusti

Zavrnitev je mogoče doseči z dataatributom na gumbu znotraj platna , kot je prikazano spodaj:

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

ali na gumb zunaj platna z uporabo, data-bs-targetkot je prikazano spodaj:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Čeprav sta podprta oba načina za opustitev offcanvas, ne pozabite, da se opustitev zunaj offcanvas ne ujema z (modalnim) vzorcem pogovornega okna ARIA Authoring Practices Guide . To storite na lastno odgovornost.

Prek JavaScripta

Omogoči ročno z:

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

Opcije

Ker je možnosti mogoče posredovati prek podatkovnih atributov ali JavaScripta, lahko dodate ime možnosti v data-bs-, kot v data-bs-animation="{value}". Prepričajte se, da ste spremenili vrsto malega črke imena možnosti iz " camelCase " v " kebab-case ", ko posredujete možnosti prek podatkovnih atributov. Na primer, uporabite data-bs-custom-class="beautifier"namesto data-bs-customClass="beautifier".

Od Bootstrap 5.2.0 vse komponente podpirajo poskusni atribut rezerviranih podatkov, data-bs-configki lahko hrani preprosto konfiguracijo komponente kot niz JSON. Ko ima element atribute data-bs-config='{"delay":0, "title":123}'in data-bs-title="456", bo končna titlevrednost 456in ločeni atributi podatkov bodo preglasili vrednosti, podane na data-bs-config. Poleg tega lahko obstoječi atributi podatkov hranijo vrednosti JSON, kot je data-bs-delay='{"show":0,"hide":150}'.

Ime Vrsta Privzeto Opis
backdrop boolean ali nizstatic true Nanesite ozadje na telo, medtem ko je offcanvas odprt. Druga možnost je, da določite staticza ozadje, ki ob kliku ne zapre platna.
keyboard logično true Zapre offcanvas, ko pritisnete tipko za izhod.
scroll logično false Dovoli drsenje telesa, ko je offcanvas odprt.

Metode

Asinhrone metode in prehodi

Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .

Za več informacij si oglejte našo dokumentacijo JavaScript .

Aktivira vašo vsebino kot element offcanvas. Sprejema neobvezne možnosti object.

Primerek offcanvas lahko ustvarite s konstruktorjem, na primer:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metoda Opis
getInstance Statična metoda, ki vam omogoča pridobitev primerka offcanvas, povezanega z elementom DOM.
getOrCreateInstance Statična metoda, ki vam omogoča, da pridobite primerek offcanvas, povezan z elementom DOM, ali ustvarite novega, če ni bil inicializiran.
hide Skrije element zunaj platna. Vrne se klicatelju, preden je bil element offcanvas dejansko skrit (tj. preden hidden.bs.offcanvaspride do dogodka).
show Prikazuje element zunaj platna. Vrne se klicatelju, preden je bil element offcanvas dejansko prikazan (tj. preden shown.bs.offcanvaspride do dogodka).
toggle Preklopi element zunaj platna na prikazan ali skrit. Vrne se klicatelju, preden je element offcanvas dejansko prikazan ali skrit (tj. preden pride do dogodka shown.bs.offcanvasali ).hidden.bs.offcanvas

Dogodki

Bootstrapov razred offcanvas razkriva nekaj dogodkov za priključitev na funkcionalnost offcanvas.

Vrsta dogodka Opis
hide.bs.offcanvas Ta dogodek se sproži takoj, ko hideje bila metoda poklicana.
hidden.bs.offcanvas Ta dogodek se sproži, ko je bil element offcanvas skrit pred uporabnikom (bo počakal, da se zaključijo prehodi CSS).
hidePrevented.bs.offcanvas Ta dogodek se sproži, ko je prikazano offcanvas, njegovo ozadje staticin se izvede klik zunaj offcanvas-a. Dogodek se sproži tudi, ko pritisnete tipko za izhod in je keyboardmožnost nastavljena na false.
show.bs.offcanvas Ta dogodek se sproži takoj, ko showse pokliče metoda primerka.
shown.bs.offcanvas Ta dogodek se sproži, ko je element offcanvas viden uporabniku (počakal bo na dokončanje prehodov CSS). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})