Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
in English

Offcanvas

Ehitage mõne klassi ja meie JavaScripti pistikprogrammi abil oma projekti peidetud külgribad navigeerimiseks, ostukärude ja muu jaoks.

Sellel lehel

Kuidas see töötab

Offcanvas on külgriba komponent, mida saab JavaScripti kaudu lülitada, et kuvada vaateava vasakust, paremast või alumisest servast. Nuppe või ankruid kasutatakse päästikutena, mis on lisatud konkreetsetele elementidele, mida lülitate, ja dataatribuute kasutatakse meie JavaScripti käivitamiseks.

  • Offcanvas jagab osa modaalidega sama JavaScripti koodist. Põhimõtteliselt on need üsna sarnased, kuid need on eraldi pistikprogrammid.
  • Sarnaselt on mõned offcanvase stiilide ja mõõtmete lähteteksti Sassi muutujad päritud modaali muutujatest.
  • Kui see kuvatakse, sisaldab offcanvas vaiketausta, millel saab klõpsata, et seda peita.
  • Sarnaselt modaalidele saab korraga näidata ainult üht lõuendit.

Pea püsti! Arvestades, kuidas CSS animatsioone käsitleb, ei saa te elementi kasutada marginvõi translatepeal . .offcanvasSelle asemel kasutage klassi iseseisva mähiselemendina.

Selle komponendi animatsiooniefekt sõltub prefers-reduced-motionmeediumipäringust. Vaadake meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .

Näited

Lõuendivälised komponendid

Allpool on näide, mis on vaikimisi kuvatud (läbi .show) .offcanvas. Offcanvas sisaldab sulgemisnupuga päise tuge ja mõne algklassi valikulist kehaklassi padding. Soovitame teil võimaluse korral lisada loobumistoimingutega lõuendivälised päised või esitada selgesõnaline loobumistoiming.

Offcanvas
Siia läheb offcanvase sisu. Siin saate paigutada peaaegu kõik Bootstrapi komponendid või kohandatud elemendid. 
<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>

Live demo

Kasutage allolevaid nuppe, et kuvada ja peita offcanvas element JavaScripti kaudu, mis lülitab .showklassi elemendil koos .offcanvasklassiga.

  • .offcanvaspeidab sisu (vaikimisi)
  • .offcanvas.shownäitab sisu

Võite kasutada hrefatribuudiga linki või atribuudiga nuppu data-bs-target. Mõlemal juhul data-bs-toggle="offcanvas"on nõutav.

Link rakendusega href
Offcanvas
Osa tekstist kohahoidjana. Päriselus võivad teil olla valitud elemendid. Meeldib tekst, pildid, loendid jne. 
<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>

Paigutus

Canvas-väliste komponentide jaoks ei ole vaikepaigutust, seega peate lisama ühe allolevatest modifikaatoriklassidest;

  • .offcanvas-startasetab lõuendi vaateaknast vasakule (näidatud ülal)
  • .offcanvas-endasetab lõuendi välisküljele vaateaknast paremale
  • .offcanvas-topasetab lõuendivälise vaate vaateava ülaossa
  • .offcanvas-bottomasetab lõuendi välisküljele vaateava põhja

Proovige ülemist, paremat ja alumist näidet allpool.

Lõuendiväline ülaosa
... 
<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>
Väljaspool lõuendit paremal
... 
<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>
Lõuendiväline põhi
... 
<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>

Taustaks

Elemendi kerimine <body>on keelatud, kui lõuend ja selle taust on nähtaval. Kasutage data-bs-scrollatribuuti <body>kerimise ja data-bs-backdroptaustadekoratsiooni vahetamiseks.

Värvitud kerimisega

Selle valiku toimimise nägemiseks proovige ülejäänud lehte kerida.

Offcanvas taustaga

.....

Kerimisega taust

Selle valiku toimimise nägemiseks proovige ülejäänud lehte kerida.

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

Juurdepääsetavus

Kuna lõuendiväline paneel on põhimõtteliselt modaalne dialoog, lisage kindlasti – aria-labelledby="..."viidates lõuendivälisele pealkirjale – .offcanvas. Pange tähele, et te ei pea lisama, role="dialog"kuna lisame selle juba JavaScripti kaudu.

Sass

Muutujad

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

Kasutamine

Offcanvase pistikprogramm kasutab raskuste tõstmiseks mõnda klassi ja atribuuti:

  • .offcanvaspeidab sisu
  • .offcanvas.shownäitab sisu
  • .offcanvas-startpeidab vasakpoolse lõuendi
  • .offcanvas-endpeidab lõuendi paremal küljel
  • .offcanvas-bottompeidab lõuendi põhja

Lisage data-bs-dismiss="offcanvas"atribuudiga loobumisnupp, mis käivitab JavaScripti funktsiooni. Kasutage seda <button>elementi kindlasti kõigis seadmetes õigeks käitumiseks.

Andmeatribuutide kaudu

Lülita sisse

Lisage elemendile data-bs-toggle="offcanvas"ja a data-bs-targetvõi href, et määrata automaatselt ühe offcanvas-elemendi juhtimine. Atribuut data-bs-targetaktsepteerib CSS-i valijat, et rakendada offcanvasi. Lisage klass offcanvaskindlasti offcanvas-elemendile. Kui soovite, et see oleks vaikimisi avatud, lisage täiendav klass show.

Vabaks laskma

Vallandumise saab saavutada lõuendiväliseldata nupul oleva atribuudiga, nagu on näidatud allpool:

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

või nupul väljaspool lõuendit , kasutades järgmist data-bs-target:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Kuigi toetatakse mõlemat viisi, kuidas lõuendivälist loobuda, pidage meeles, et väljastpoolt lõuendist loobumine ei ühti WAI-ARIA modaalse dialoogi kujundusmustriga . Tehke seda omal riisikol.

JavaScripti kaudu

Luba käsitsi:

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

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-bs-, nagu data-bs-backdrop="".

Nimi Tüüp Vaikimisi Kirjeldus
backdrop tõeväärtus true Kandke kehale taust, kui offcanvas on avatud
keyboard tõeväärtus true Paoklahvi vajutamisel sulgeb lõuendiväline
scroll tõeväärtus false Luba keha kerimine, kui offcanvas on avatud

meetodid

Asünkroonsed meetodid ja üleminekud

Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .

Aktiveerib teie sisu lõuendivälise elemendina. Aktsepteerib valikulisi valikuid object.

Konstruktoriga saate luua offcanvas-eksemplari, näiteks:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
meetod Kirjeldus
toggle Lülitab lõuendivälise elemendi kuvatud või peidetud olekuks. Naaseb helistaja juurde enne, kui offcanvas elementi on tegelikult näidatud või peidetud (st enne sündmuse shown.bs.offcanvasvõi hidden.bs.offcanvastoimumist).
show Näitab lõuendivälist elementi. Naaseb helistaja juurde enne, kui offcanvas elementi on tegelikult näidatud (st enne shown.bs.offcanvassündmuse toimumist).
hide Peidab lõuendivälise elemendi. Naaseb helistaja juurde enne, kui offcanvas element on tegelikult peidetud (st enne hidden.bs.offcanvassündmuse toimumist).
getInstance Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud offcanvas-eksemplari
getOrCreateInstance Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud offcanvas-eksemplari või luua uue juhul, kui seda ei lähtestatud

Sündmused

Bootstrapi offcanvas-klass paljastab mõned sündmused, mis on seotud offcanvase funktsioonidega.

Sündmuse tüüp Kirjeldus
show.bs.offcanvas See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse.
shown.bs.offcanvas See sündmus käivitatakse, kui offcanvas-element on kasutajale nähtavaks tehtud (ootab, kuni CSS-i üleminekud lõppevad).
hide.bs.offcanvas See sündmus käivitatakse kohe, kui hidemeetod on välja kutsutud.
hidden.bs.offcanvas See sündmus käivitatakse, kui offcanvas-element on kasutaja eest peidetud (ootab, kuni CSS-i üleminekud lõpetatakse). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})