Offcanvas
Byggðu faldar hliðarstikur inn í verkefnið þitt fyrir siglingar, innkaupakörfur og fleira með nokkrum flokkum og JavaScript viðbótinni okkar.
Hvernig það virkar
Offcanvas er hliðarstikuhluti sem hægt er að skipta um með JavaScript til að birtast frá vinstri, hægri eða neðri brún útsýnisgluggans. Hnappar eða akkeri eru notuð sem kveikjar sem eru tengdir tilteknum þáttum sem þú skiptir um og data
eiginleikar eru notaðir til að kalla fram JavaScript okkar.
- Offcanvas deilir sumum af sama JavaScript kóða og modals. Hugmyndalega eru þau nokkuð lík, en þau eru aðskilin viðbætur.
- Að sama skapi eru sumar Sass breytur upprunalega fyrir stíla og víddir offcanvas erft frá breytum modalsins.
- Þegar það er sýnt inniheldur offcanvas sjálfgefna bakgrunn sem hægt er að smella á til að fela offcanvas.
- Svipað og með formúlum er aðeins hægt að sýna einn offcanvas í einu.
Höfuð upp! Í ljósi þess hvernig CSS meðhöndlar hreyfimyndir geturðu ekki notað margin
eða translate
á .offcanvas
frumefni. Í staðinn skaltu nota bekkinn sem sjálfstæðan umbúðaþátt.
prefers-reduced-motion
miðlunarfyrirspurninni. Sjá
kaflann um minni hreyfingu í aðgengisskjölunum okkar .
Dæmi
Offcanvas íhlutir
Hér að neðan er dæmi utan striga sem er sjálfgefið sýnt (í gegnum .show
á .offcanvas
). Offcanvas inniheldur stuðning fyrir haus með lokunarhnappi og valfrjálsan líkamsflokk fyrir upphafsstafi padding
. Við mælum með því að þú hafir offcanvas hausa með afvísunaraðgerðum þegar mögulegt er, eða gefðu upp skýra frávísunaraðgerð.
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>
Sýning í beinni
Notaðu hnappana hér að neðan til að sýna og fela offcanvas frumefni í gegnum JavaScript sem skiptir .show
bekknum á frumefni með .offcanvas
bekknum.
.offcanvas
felur efni (sjálfgefið).offcanvas.show
sýnir efni
Þú getur notað tengil með href
eigindinni eða hnapp með data-bs-target
eigindinni. Í báðum tilvikum data-bs-toggle="offcanvas"
er krafist.
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>
Staðsetning
Það er engin sjálfgefin staðsetning fyrir hluti utan striga, svo þú verður að bæta við einum af breytingaflokkunum hér að neðan;
.offcanvas-start
setur utan striga vinstra megin við útsýnisgluggann (sýnt hér að ofan).offcanvas-end
setur offcanvas hægra megin við útsýnisgáttina.offcanvas-top
setur offcanvas efst á útsýnisglugganum.offcanvas-bottom
setur offcanvas neðst á útsýnisglugganum
Prófaðu efstu, hægri og neðstu dæmin hér að neðan.
Offcanvas toppur
<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 hægri
<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>
Botn úr striga
<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>
Baksvið
Slökkt er á því að fletta frumefninu þegar offcanvas <body>
og bakgrunnur hans er sýnilegur. Notaðu data-bs-scroll
eigindina til að skipta um <body>
skrun og data-bs-backdrop
til að skipta um bakgrunn.
Litað með því að fletta
Prófaðu að fletta restinni af síðunni til að sjá þennan valkost í aðgerð.
Offcanvas með bakgrunni
.....
Bakgrunnur með flettu
Prófaðu að fletta restinni af síðunni til að sjá þennan valkost í aðgerð.
<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>
Aðgengi
Þar sem offcanvas spjaldið er hugmyndafræðilega myndgluggi, vertu viss um að bæta við aria-labelledby="..."
– með vísan í offcanvas titilinn – við .offcanvas
. Athugaðu að þú þarft ekki að bæta role="dialog"
því við þar sem við bætum því nú þegar við með JavaScript.
Sass
Breytur
$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;
Notkun
Offcanvas viðbótin notar nokkra flokka og eiginleika til að takast á við þungar lyftingar:
.offcanvas
felur innihaldið.offcanvas.show
sýnir innihaldið.offcanvas-start
felur offcanvasið til vinstri.offcanvas-end
felur offcanvasið til hægri.offcanvas-bottom
felur offcanvasið neðst
Bættu við hafnahnappi með data-bs-dismiss="offcanvas"
eigindinni, sem ræsir JavaScript virknina. Gakktu úr skugga um að þú notir <button>
þáttinn með því til að hegðun sé rétt í öllum tækjum.
Í gegnum gagnaeiginleika
Bættu við data-bs-toggle="offcanvas"
og a data-bs-target
eða href
við þáttinn til að úthluta sjálfkrafa stjórn á einum þætti utan striga. Eigindin data-bs-target
samþykkir CSS val til að nota offcanvas á. Vertu viss um að bæta bekknum offcanvas
við offcanvas þáttinn. Ef þú vilt að það opni sjálfgefið skaltu bæta við viðbótarflokknum show
.
Með JavaScript
Virkja handvirkt með:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Valmöguleikar
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-bs-
, eins og í data-bs-backdrop=""
.
Nafn | Tegund | Sjálfgefið | Lýsing |
---|---|---|---|
backdrop |
Boolean | true |
Settu bakgrunn á líkamann á meðan offcanvas er opið |
keyboard |
Boolean | true |
Lokar offcanvas þegar ýtt er á escape takkann |
scroll |
Boolean | false |
Leyfðu að fletta meginmáli á meðan offcanvas er opið |
Aðferðir
Ósamstilltar aðferðir og umskipti
Allar API aðferðir eru ósamstilltar og hefja umskipti . Þeir snúa aftur til þess sem hringir um leið og umskiptin eru hafin en áður en þeim lýkur . Að auki verður aðferðakall á umbreytingarhluta hunsað .
Virkjar efnið þitt sem offcanvas þáttur. Samþykkir valfrjálsa valkosti object
.
Þú getur búið til offcanvas dæmi með byggingaraðilanum, til dæmis:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Aðferð | Lýsing |
---|---|
toggle |
Skiptir um að sýna eða falinn þátt utan striga. Snýr aftur til þess sem hringir áður en offcanvas þátturinn hefur verið sýndur eða falinn (þ.e. áður en atburðurinn shown.bs.offcanvas eða hidden.bs.offcanvas á sér stað). |
show |
Sýnir frumefni utan striga. Fer aftur til þess sem hringir áður en offcanvas þátturinn hefur verið sýndur (þ.e. áður en shown.bs.offcanvas atburðurinn á sér stað). |
hide |
Felur frumefni utan striga. Snýr aftur til þess sem hringir áður en offcanvas þátturinn hefur verið falinn (þ.e. áður en hidden.bs.offcanvas atburðurinn á sér stað). |
getInstance |
Statísk aðferð sem gerir þér kleift að fá offcanvas tilvikið tengt DOM frumefni |
getOrCreateInstance |
Statísk aðferð sem gerir þér kleift að fá offcanvas tilvikið tengt DOM frumefni, eða búa til nýtt ef það var ekki frumstillt |
Viðburðir
Offcanvas flokkur Bootstrap afhjúpar nokkra atburði til að tengja við offcanvas virkni.
Tegund viðburðar | Lýsing |
---|---|
show.bs.offcanvas |
Þessi atburður ræsir strax þegar show tilviksaðferðin er kölluð. |
shown.bs.offcanvas |
Þessi atburður er ræstur þegar offcanvas þáttur hefur verið gerður sýnilegur notanda (mun bíða eftir að CSS umbreytingum ljúki). |
hide.bs.offcanvas |
Þessi atburður er ræstur strax þegar hide aðferðin hefur verið kölluð. |
hidden.bs.offcanvas |
Þessi atburður er ræstur þegar offcanvas þáttur hefur verið falinn fyrir notandanum (mun bíða eftir að CSS umbreytingum ljúki). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})