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

Sem gre vsebina za offcanvas. Tukaj lahko postavite skoraj katero koli komponento Bootstrap ali elemente po meri.

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

Nekaj besedila kot ograda. V resničnem življenju lahko imate elemente, ki ste jih izbrali. Všečkajte, besedilo, slike, sezname itd.

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

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.

...

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

Ozadje

Drsenje po <body>elementu je onemogočeno, ko sta vidna izven platna in njegovo ozadje. Uporabite data-bs-scrollatribut za preklop <body>drsenja in data-bs-backdroppreklop ozadja.

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

.....

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

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

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.

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-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 se privzeto odpre, 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 gumbu 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 vzorcem oblikovanja modalnega pogovornega okna WAI-ARIA . To storite na lastno odgovornost.

Prek JavaScripta

Omogoči ročno z:

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

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-bs-, kot v data-bs-backdrop="".

Ime	Vrsta	Privzeto	Opis
`backdrop`	logično	`true`	Nanesite ozadje na telo, medtem ko je offcanvas odprt
`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:

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

Metoda	Opis
`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.offcanvas`ali ).`hidden.bs.offcanvas`
`show`	Prikazuje element zunaj platna. Vrne se klicatelju, preden je bil element offcanvas dejansko prikazan (tj. preden `shown.bs.offcanvas`pride do dogodka).
`hide`	Skrije element zunaj platna. Vrne se klicatelju, preden je bil element offcanvas dejansko skrit (tj. preden `hidden.bs.offcanvas`pride do dogodka).
`getInstance`	Statična metoda, ki vam omogoča pridobitev primerka offcanvas, povezanega z elementom DOM
`getOrCreateInstance`	Statična metoda, ki vam omogoča pridobitev primerka offcanvas, povezanega z elementom DOM, ali ustvarjanje novega, če ni bil inicializiran

Dogodki

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

Vrsta dogodka	Opis
`show.bs.offcanvas`	Ta dogodek se sproži takoj, ko `show`se 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).
`hide.bs.offcanvas`	Ta dogodek se sproži takoj, ko `hide`je 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).

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

Offcanvas

Kako deluje

Primeri

Komponente Offcanvas

Offcanvas

Demo v živo

Offcanvas

Umestitev

Top iz platna

Offcanvas desno

Dno iz platna

Ozadje

Barvno s pomikanjem

Offcanvas z ozadjem

Ozadje z drsenjem

Dostopnost

Sass

Spremenljivke

Uporaba

Preko podatkovnih atributov

Preklopi

Odpusti

Prek JavaScripta

Opcije

Metode

Asinhrone metode in prehodi

Dogodki