Offcanvas
Konstwi ba yo kache nan pwojè ou a pou navigasyon, kabwa fè makèt, ak plis ankò ak kèk klas ak plugin JavaScript nou an.
Ki jan li fonksyone
Offcanvas se yon eleman ba ki ka chanje atravè JavaScript pou parèt soti nan kwen gòch, dwa oswa anba fenèt la. Bouton oswa lank yo itilize kòm deklannche ki tache ak eleman espesifik ou aktive, epi data
yo itilize atribi pou envoke JavaScript nou an.
- Offcanvas pataje kèk nan menm kòd JavaScript ak modal yo. Konseptyèlman, yo se byen menm jan, men yo se grefon separe.
- Menm jan an tou, kèk varyab sous Sass pou estil ak dimansyon offcanvas yo eritye nan varyab modal la.
- Lè yo montre, offcanvas gen ladan yon seri defo ki ka klike pou kache offcanvas la.
- Menm jan ak modal, se sèlman yon sèl offcanvas ka montre nan yon moman.
Tèt leve! Etandone ki jan CSS okipe animasyon, ou pa ka itilize margin
oswa translate
sou yon .offcanvas
eleman. Olye de sa, sèvi ak klas la kòm yon eleman anbalaj endepandan.
prefers-reduced-motion
rechèch medya yo. Gade
seksyon mouvman redui nan dokiman aksè nou an .
Egzanp yo
Konpozan Offcanvas
Anba a se yon egzanp offcanvas ki montre pa default (via .show
sou .offcanvas
). Offcanvas gen ladan sipò pou yon header ak yon bouton fèmen ak yon klas kò si ou vle pou kèk inisyal padding
. Nou sijere pou w mete en-tête offcanvas ak aksyon anile chak fwa sa posib, oswa bay yon aksyon anile eksplisit.
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
Sèvi ak bouton ki anba yo pou montre ak kache yon eleman offcanvas atravè JavaScript ki chanje .show
klas la sou yon eleman ak .offcanvas
klas la.
.offcanvas
kache kontni (default).offcanvas.show
montre kontni
Ou ka itilize yon lyen ak href
atribi a, oswa yon bouton ak data-bs-target
atribi a. Nan de ka yo, data-bs-toggle="offcanvas"
li nesesè.
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>
Plasman
Pa gen okenn plasman default pou konpozan offcanvas, kidonk ou dwe ajoute youn nan klas modifye anba a;
.offcanvas-start
mete offcanvas sou bò gòch fenèt la (yo montre pi wo a).offcanvas-end
mete offcanvas sou bò dwat viewport la.offcanvas-top
mete offcanvas sou tèt pòtay la.offcanvas-bottom
mete offcanvas sou anba a nan pòtay la
Eseye egzanp anlè, adwat ak anba anba a.
Offcanvas tèt
<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 dwat
<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 anba
<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>
Toile
Defile <body>
eleman an enfim lè yon kanva ak seri li yo vizib. Sèvi ak data-bs-scroll
atribi a pou chanje <body>
defile ak data-bs-backdrop
pou chanje seri a.
Koulè ak defile
Eseye defile rès paj la pou wè opsyon sa a an aksyon.
Offcanvas ak twal
.....
Backdrop ak defile
Eseye defile rès paj la pou wè opsyon sa a an aksyon.
<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>
Aksesiblite
Piske panèl offcanvas la se yon dyalòg modal, asire w ke ou ajoute aria-labelledby="..."
—fè referans tit la offcanvas—nan .offcanvas
. Remake byen ke ou pa bezwen ajoute role="dialog"
paske nou deja ajoute li atravè JavaScript.
Sass
Varyab
$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;
Itilizasyon
Plugin offcanvas la itilize kèk klas ak atribi pou okipe leve lou:
.offcanvas
kache kontni an.offcanvas.show
montre kontni an.offcanvas-start
kache offcanvas la sou bò gòch la.offcanvas-end
kache offcanvas la sou bò dwat la.offcanvas-bottom
kache offcanvas la sou anba a
Ajoute yon bouton ranvwaye ak data-bs-dismiss="offcanvas"
atribi a, ki deklanche fonksyonalite JavaScript. Asire ou ke ou sèvi ak <button>
eleman nan ak li pou bon konpòtman atravè tout aparèy.
Via atribi done yo
Baskile
Ajoute data-bs-toggle="offcanvas"
ak yon data-bs-target
oswa href
nan eleman pou otomatikman bay kontwòl yon eleman offcanvas. Atribi a data-bs-target
aksepte yon seleksyon CSS pou aplike offcanvas la. Asire w ou ajoute klas offcanvas
la nan eleman offcanvas la. Si ou ta renmen li louvri defo, ajoute klas adisyonèl la show
.
Ranvwaye
Yo ka fè ranvwa a ak data
atribi ki sou yon bouton nan offcanvas la jan yo montre pi ba a:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
oswa sou yon bouton andeyò twal la lè l sèvi avèk data-bs-target
jan yo montre anba a:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Via JavaScript
Pèmèt manyèlman ak:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Opsyon
Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-bs-
, tankou nan data-bs-backdrop=""
.
Non | Kalite | Default | Deskripsyon |
---|---|---|---|
backdrop |
booleyen | true |
Aplike yon seri sou kò pandan ke offcanvas louvri |
keyboard |
booleyen | true |
Fèmen offcanvas la lè yo peze kle chape |
scroll |
booleyen | false |
Pèmèt kò defile pandan offcanvas louvri |
Metòd
Metòd asynchrone ak tranzisyon
Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .
Aktive kontni ou kòm yon eleman offcanvas. Aksepte yon opsyon opsyonèl object
.
Ou ka kreye yon egzanp offcanvas ak konstrukteur a, pou egzanp:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metòd | Deskripsyon |
---|---|
toggle |
Baskile yon eleman offcanvas pou montre oswa kache. Retounen bay moun k ap rele a anvan yo montre oswa kache eleman offcanvas la (sa vle di anvan evènman shown.bs.offcanvas an hidden.bs.offcanvas rive). |
show |
Montre yon eleman offcanvas. Retounen bay moun kap rele a anvan yo te montre eleman offcanvas la (sa vle di anvan shown.bs.offcanvas evènman an rive). |
hide |
Kache yon eleman offcanvas. Retounen bay moun kap rele a anvan eleman offcanvas la te kache (sa vle di anvan hidden.bs.offcanvas evènman an rive). |
getInstance |
Estatik ki pèmèt ou jwenn egzanp offcanvas ki asosye ak yon eleman DOM |
getOrCreateInstance |
Estatik ki pèmèt ou jwenn egzanp offcanvas ki asosye ak yon eleman DOM, oswa kreye yon nouvo si li pa te inisyalize. |
Evènman
Klas offcanvas Bootstrap a ekspoze kèk evènman pou branche nan fonksyon offcanvas.
Kalite evènman | Deskripsyon |
---|---|
show.bs.offcanvas |
Evènman sa a dife imedyatman lè yo show rele metòd egzanp lan. |
shown.bs.offcanvas |
Evènman sa a se revoke lè yon eleman offcanvas te fè vizib pou itilizatè a (ap tann pou tranzisyon CSS fini). |
hide.bs.offcanvas |
Evènman sa a te tire imedyatman lè yo hide te rele metòd la. |
hidden.bs.offcanvas |
Evènman sa a revoke lè yon eleman offcanvas te kache pou itilizatè a (ap tann pou tranzisyon CSS fini). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})