Offcanvas
Ehitage mõne klassi ja meie JavaScripti pistikprogrammi abil oma projekti peidetud külgribad navigeerimiseks, ostukärude ja muu jaoks.
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 data
atribuute 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 margin
või translate
peal . .offcanvas
Selle asemel kasutage klassi iseseisva mähiselemendina.
prefers-reduced-motion
meediumipä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
<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 .show
klassi elemendil koos .offcanvas
klassiga.
.offcanvas
peidab sisu (vaikimisi).offcanvas.show
näitab sisu
Võite kasutada href
atribuudiga linki või atribuudiga nuppu data-bs-target
. Mõlemal juhul data-bs-toggle="offcanvas"
on nõutav.
Offcanvas
<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-start
asetab lõuendi vaateaknast vasakule (näidatud ülal).offcanvas-end
asetab lõuendi välisküljele vaateaknast paremale.offcanvas-top
asetab lõuendivälise vaate vaateava ülaossa.offcanvas-bottom
asetab 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-scroll
atribuuti <body>
kerimise ja data-bs-backdrop
taustadekoratsiooni vahetamiseks.
Värvitud kerimisega
Selle valiku toimimise nägemiseks proovige ülejäänud lehte kerida.
Offcanvas taustaga
.....
Taustaga kerimisega
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">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>
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;
Kasutamine
Offcanvase pistikprogramm kasutab raskuste tõstmiseks mõnda klassi ja atribuuti:
.offcanvas
peidab sisu.offcanvas.show
näitab sisu.offcanvas-start
peidab vasakpoolse lõuendi.offcanvas-end
peidab lõuendi paremal küljel.offcanvas-bottom
peidab 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
Lisage elemendile data-bs-toggle="offcanvas"
ja a data-bs-target
või href
, et määrata automaatselt ühe offcanvas-elemendi juhtimine. Atribuut data-bs-target
aktsepteerib CSS-i valijat, et rakendada offcanvasi. Lisage klass offcanvas
kindlasti offcanvas-elemendile. Kui soovite, et see oleks vaikimisi avatud, lisage täiendav klass show
.
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.offcanvas või hidden.bs.offcanvas toimumist). |
show |
Näitab lõuendivälist elementi. Naaseb helistaja juurde enne, kui offcanvas elementi on tegelikult näidatud (st enne shown.bs.offcanvas sündmuse toimumist). |
hide |
Peidab lõuendivälise elemendi. Naaseb helistaja juurde enne, kui offcanvas element on tegelikult peidetud (st enne hidden.bs.offcanvas sü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 show eksemplari 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 hide meetod 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...
})