Offcanvas
Rakenna projektiisi piilotettuja sivupalkkeja navigointia, ostoskärryjä ja muuta varten muutamien luokkien ja JavaScript-laajennuksellamme.
Kuinka se toimii
Offcanvas on sivupalkin komponentti, joka voidaan vaihtaa JavaScriptin avulla näkyviin näkymän vasemmasta, oikeasta tai alareunasta. Painikkeita tai ankkureita käytetään laukaisimina, jotka on liitetty tiettyihin elementteihin, joita vaihdat, ja data
attribuutteja käytetään JavaScriptin kutsumiseen.
- Offcanvas jakaa jonkin verran samaa JavaScript-koodia kuin modaalit. Käsitteellisesti ne ovat melko samanlaisia, mutta ne ovat erillisiä laajennuksia.
- Samoin jotkut lähde Sass -muuttujat offcanvasin tyyleille ja mitoille peritään modaalin muuttujista.
- Kun offcanvas näytetään, se sisältää oletustaustan, jota voidaan napsauttaa piilottaaksesi offcanvasin.
- Modaalien tapaan vain yksi offcanvas voidaan näyttää kerrallaan.
Varoitus! Koska CSS käsittelee animaatioita, et voi käyttää elementtiä margin
tai translate
sen päällä .offcanvas
. Käytä sen sijaan luokkaa itsenäisenä kääreelementtinä.
prefers-reduced-motion
mediakyselystä. Katso
esteettömyysdokumentaation osio liikkeen vähentämisestä .
Esimerkkejä
Offcanvas-komponentit
Alla on offcanvas-esimerkki, joka näytetään oletuksena ( .show
päällä .offcanvas
). Offcanvas sisältää tuen ylätunnisteelle, jossa on sulkemispainike, ja valinnaisen runkoluokan joillekin aloitusmuodoille padding
. Suosittelemme, että sisällytät offcanvas-otsikot hylkäystoimintoihin aina kun mahdollista, tai annat nimenomaisen hylkäystoiminnon.
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
Käytä alla olevia painikkeita näyttääksesi ja piilottaaksesi offcanvas-elementin JavaScriptin avulla, joka vaihtaa .show
luokan elementin päälle .offcanvas
luokan kanssa.
.offcanvas
piilottaa sisällön (oletus).offcanvas.show
näyttää sisältöä
Voit käyttää linkkiä href
määritteen kanssa tai painiketta data-bs-target
määritteen kanssa. Molemmissa tapauksissa data-bs-toggle="offcanvas"
vaaditaan.
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>
Sijoitus
Offcanvas-komponenteille ei ole oletussijoittelua, joten sinun on lisättävä jokin alla olevista muokkausluokista;
.offcanvas-start
asettaa offcanvasin kuvaportin vasemmalle puolelle (näkyy yllä).offcanvas-end
asettaa offcanvasin kuvaportin oikealle puolelle.offcanvas-top
asettaa offcanvasin kuvaportin yläosaan.offcanvas-bottom
asettaa offcanvasin kuvaportin alaosaan
Kokeile ylhäältä, oikealta ja alhaalta olevia esimerkkejä alla.
Offcanvas-toppi
<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>
Offcanvas oikein
<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>
Offcanvas-pohja
<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>
Tausta
Elementin vieritys <body>
on poissa käytöstä, kun offcanvas ja sen tausta ovat näkyvissä. Käytä data-bs-scroll
attribuuttia <body>
vierityksen ja data-bs-backdrop
taustan vaihtamiseen.
Väritetty rullauksella
Kokeile vierittämällä sivun loppuosaa nähdäksesi tämän vaihtoehdon toiminnassa.
Offcanvas taustalla
.....
Taustalla vieritys
Kokeile vierittämällä sivun loppuosaa nähdäksesi tämän vaihtoehdon toiminnassa.
<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>
Esteettömyys
Koska offcanvas-paneeli on käsitteellisesti modaalinen valintaikkuna, muista lisätä aria-labelledby="..."
-viittaen offcanvas-otsikkoon - kohtaan .offcanvas
. Huomaa, että sinun ei tarvitse lisätä, role="dialog"
koska lisäämme sen jo JavaScriptin kautta.
Sass
Muuttujat
$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;
Käyttö
Offcanvas-laajennus käyttää muutamia luokkia ja attribuutteja raskaiden nostojen käsittelyyn:
.offcanvas
piilottaa sisällön.offcanvas.show
näyttää sisällön.offcanvas-start
piilottaa vasemmalla olevan kankaan.offcanvas-end
piilottaa offcanvasin oikealle.offcanvas-bottom
piilottaa pohjakankaan
Lisää hylkäyspainike data-bs-dismiss="offcanvas"
määritteellä, joka käynnistää JavaScript-toiminnon. Muista käyttää <button>
elementtiä sen kanssa, jotta se toimii oikein kaikissa laitteissa.
Tietomääritteiden kautta
Lisää elementtiin data-bs-toggle="offcanvas"
ja a data-bs-target
tai href
määrittääksesi automaattisesti yhden offcanvas-elementin hallinnan. Attribuutti data-bs-target
hyväksyy CSS-valitsimen, jolla offcanvaa käytetään. Muista lisätä luokka offcanvas
offcanvas-elementtiin. Jos haluat sen avautuvan oletusarvoisesti, lisää ylimääräinen luokka show
.
JavaScriptin kautta
Ota käyttöön manuaalisesti:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Vaihtoehdot
Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-bs-
, kuten kohdassa data-bs-backdrop=""
.
Nimi | Tyyppi | Oletus | Kuvaus |
---|---|---|---|
backdrop |
boolean | true |
Lisää taustaa runkoon, kun offcanvas on auki |
keyboard |
boolean | true |
Sulkee offcanvasin, kun Esc-näppäintä painetaan |
scroll |
boolean | false |
Salli tekstin vieritys, kun offcanvas on auki |
menetelmät
Asynkroniset menetelmät ja siirtymät
Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .
Aktivoi sisältösi offcanvas-elementtinä. Hyväksyy valinnaiset vaihtoehdot object
.
Voit luoda offcanvas-esiintymän konstruktorilla, esimerkiksi:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Menetelmä | Kuvaus |
---|---|
toggle |
Vaihtaa offcanvas-elementin näytettäväksi tai piilotetuksi. Palaa soittajalle ennen kuin offcanvas-elementti on todella näkyvissä tai piilotettu (eli ennen kuin tapahtumaa shown.bs.offcanvas tai hidden.bs.offcanvas tapahtuu). |
show |
Näyttää offcanvas-elementin. Palaa soittajalle ennen kuin offcanvas-elementti on todella näytetty (eli ennen shown.bs.offcanvas tapahtumaa). |
hide |
Piilottaa offcanvas-elementin. Palaa soittajalle ennen kuin offcanvas-elementti on tosiasiallisesti piilotettu (eli ennen hidden.bs.offcanvas tapahtumaa). |
getInstance |
Staattinen menetelmä, jonka avulla voit saada offcanvas-instanssin, joka liittyy DOM-elementtiin |
getOrCreateInstance |
Staattinen menetelmä, jonka avulla voit saada offcanvas-ilmentymän, joka liittyy DOM-elementtiin, tai luoda uuden, jos sitä ei alustettu |
Tapahtumat
Bootstrapin offcanvas-luokka paljastaa muutamia tapahtumia offcanvas-toimintoihin kytkeytymistä varten.
Tapahtumatyyppi | Kuvaus |
---|---|
show.bs.offcanvas |
Tämä tapahtuma käynnistyy välittömästi, kun show instanssimenetelmää kutsutaan. |
shown.bs.offcanvas |
Tämä tapahtuma käynnistyy, kun offcanvas-elementti on tehty näkyväksi käyttäjälle (odottaa CSS-siirtymien valmistumista). |
hide.bs.offcanvas |
Tämä tapahtuma käynnistyy välittömästi, kun hide menetelmä on kutsuttu. |
hidden.bs.offcanvas |
Tämä tapahtuma käynnistyy, kun offcanvas-elementti on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})