Ɔfkanvas
Bil saydbar dɛn we ayd insay yu prɔjek fɔ nevigishɔn, shopin kat, ɛn ɔda tin dɛn wit sɔm klas dɛn ɛn wi JavaSkript plɔgin.
Aw i de wok
Offcanvas na wan saydba kɔmpɔnɛnt we yu kin chenj bay JavaSkript fɔ apia frɔm di lɛft, rayt, ɔ dɔŋ edj na di viupɔt. Dɛn kin yuz bɔtin ɔ anka dɛn as trig dɛn we dɛn kin ataya to sɔm patikyula tin dɛn we yu kin tɔgl, ɛn data
dɛn kin yuz atribyut dɛn fɔ kɔl wi JavaSkript.
- Offcanvas de sheb sɔm pan di sem JavaSkript kɔd dɛn lɛk modal dɛn. Fɔ kɔnsɛpt, dɛn rili fiba, bɔt dɛn na difrɛn plɔgin dɛn.
- Semweso, sɔm sɔs Sass vɛriɔbul dɛn fɔ ɔfkanvas in stayl ɛn dimɛnshɔn dɛn de inhɛrit frɔm di modal in vɛriɔbul dɛn.
- We dɛn sho am, ɔfkanvas gɛt difɔlt bakdrop we yu kin klik fɔ ayd di ɔfkanvas.
- Semweso lɛk modals, na wan ɔfkanvas nɔmɔ dɛn kin sho wan tɛm.
Hed dɛn de ɔp! Given aw CSS de handle animashɔn, yu nɔ go ebul fɔ yuz margin
ɔ translate
pan wan .offcanvas
ɛlimɛnt. Bifo dat, yuz di klas as indipɛndɛnt wrap ɛlimɛnt.
prefers-reduced-motion
midia kwɛstyɔn. Si di
ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .
Ɛgzampul dɛn
Di komponent dɛn we de na di ɔfkanvas
Dis dɔŋ ya na wan ɔfkanvas ɛgzampul we dɛn sho bay difɔlt (via .show
on .offcanvas
). Offcanvas inklud sɔpɔt fɔ wan hεda wit wan klos bɔtin ɛn wan opshɔnal bɔdi klas fɔ sɔm initial padding
. Wi de advays yu fɔ put ɔfkanvas hεda dɛn wit dismis akshɔn ɛnitɛm we i pɔsibul, ɔ gi wan klia dismis akshɔn.
Ɔfkanvas
<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>
Layf dɛmo
Yuz di bɔtin dɛn we de dɔŋ fɔ sho ɛn ayd wan ɔfkanvas ɛlimɛnt tru JavaSkript we de tɔgl di .show
klas pan wan ɛlimɛnt wit di .offcanvas
klas.
.offcanvas
de ayd di tin dɛn we de insay (difɔlt) ..offcanvas.show
sho wetin de insay
Yu kin yuz wan link wit di href
atribyut, ɔ wan bɔtin wit di data-bs-target
atribyut. Insay dɛn tu kes ya, data-bs-toggle="offcanvas"
dɛn nid fɔ du di.
Ɔfkanvas
<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>
Di ples we dɛn fɔ put am
No difɔlt ples nɔ de fɔ ɔfkanvas kɔmpɔnɛnt dɛn, so yu fɔ ad wan pan di modifya klas dɛn we de dɔŋ ya;
.offcanvas-start
de put ɔfkanvas na di lɛft say na di say usay dɛn de si di tin dɛn (we dɛn sho ɔp).offcanvas-end
de put ɔfkanvas na di rayt say na di say usay dɛn de si di pikchɔ.offcanvas-top
de put ɔfkanvas na di tap na di say we dɛn de si di pikchɔ.offcanvas-bottom
de put ɔfkanvas na di bɔt ɔf di viupɔt
Tray di ɛgzampul dɛn we de ɔp, rayt, ɛn dɔŋ dɔŋ ya.
Ɔfkanvas na di tɔp
<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>
Offkanvas rayt
<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>
Offkanvas na di bottom
<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>
Bakgrɔn fɔ di pikchɔ
Skrol di <body>
elemɛnt nɔ de wok we yu si wan ɔfkanvas ɛn in bakdrop. Yuz di data-bs-scroll
atribyut fɔ chenj di <body>
skrol ɛn data-bs-backdrop
fɔ chenj di bakdrop.
Kɔlɔ wit skrol
Tray fɔ skrol di ɔda pat dɛn na di pej fɔ si dis opshɔn de wok.
Offcanvas wit bakdrop
.....
Bakgdrop wit skrol
Tray fɔ skrol di ɔda pat dɛn na di pej fɔ si dis opshɔn de wok.
<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>
Di we aw pɔsin kin ebul fɔ go de
Bikɔs di ɔfkanvas panɛl na kɔnsɛptwal wan modal dayalɔg, mek shɔ se yu ad aria-labelledby="..."
—rɛfrɛns di ɔfkanvas taytul—to .offcanvas
. Notis se yu nɔ nid fɔ ad role="dialog"
bikɔs wi dɔn ɔlrɛdi ad am bay JavaSkript.
Sass we bin de
Di tin dɛn we kin chenj
$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;
Aw fɔ yuz am
Di ɔfkanvas plɔgin de yuz sɔm klas ɛn atribyut dɛn fɔ handle di ebi liftin:
.offcanvas
de ayd di tin dɛn we de insay.offcanvas.show
sho di tin dɛn we de insay.offcanvas-start
ayd di ɔfkanvas na di lɛft.offcanvas-end
ayd di ɔfkanvas na di rayt say.offcanvas-bottom
de ayd di ɔfkanvas we de dɔŋ
Ad wan dismis bɔtin wit di data-bs-dismiss="offcanvas"
atribyut, we de mek di JavaSkript wok. Mek shɔ se yu yuz di <button>
ɛlimɛnt wit am fɔ biev fayn akɔdin to ɔl di divays dɛn.
Via data atribyut dɛn
Ad data-bs-toggle="offcanvas"
ɛn wan data-bs-target
ɔ href
to di ɛlimɛnt fɔ ɔtomɛtik asaynd kɔntrol fɔ wan ɔfkanvas ɛlimɛnt. Di data-bs-target
atribyut de aksept wan CSS sɛlɛktɔ fɔ aplay di ɔfkanvas to. Mek shɔ se yu ad di klas offcanvas
to di ɔfkanvas ɛlimɛnt. If yu want fɔ mek i opin difɔlt, ad di ɔda klas show
.
Yu kin yuz JavaSkript fɔ yuz am
Enable manually wit:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Di tin dɛn we yu kin pik fɔ du
Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-bs-
, lɛk insay data-bs-backdrop=""
.
Nem | Kayn | Balans | Tɔk bɔt |
---|---|---|---|
backdrop |
boolean we dɛn kɔl | true |
Put bakdrop pan bɔdi we ɔfkanvas opin |
keyboard |
boolean we dɛn kɔl | true |
Klos di ɔfkanvas we yu prɛs di ɛspɛk ki |
scroll |
boolean we dɛn kɔl | false |
Alaw fɔ skrol di bɔdi we di ɔfkanvas opin |
Di we aw dɛn de du am
Asynchronous mεtכd dεm εn transishכn dεm
Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .
Aktiv yu kɔntinyu as ɔfkanvas ɛlimɛnt. Aksept wan opshɔnal opshɔn dɛn object
.
Yu kin mek wan ɔfkanvas instans wit di kɔnstrɔkta, fɔ ɛgzampul:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
We | Tɔk bɔt |
---|---|
toggle |
Toggles wan ɔfkanvas ɛlimɛnt fɔ sho ɔ ayd. Ritɔn to di pɔsin we kɔl bifo di ɔfkanvas ɛlimɛnt dɔn rili sho ɔ ayd (dat na bifo di shown.bs.offcanvas ɔ hidden.bs.offcanvas ivin apin). |
show |
Sho wan ɔfkanvas ɛlimɛnt. Ritɔn to di pɔsin we kɔl bifo di ɔfkanvas ɛlimɛnt dɔn rili sho (dat na bifo di shown.bs.offcanvas ivin apin). |
hide |
Ayd wan ɔfkanvas ɛlimɛnt. Ritɔn to di pɔsin we kɔl bifo di ɔfkanvas ɛlimɛnt dɔn rili ayd (dat na bifo di hidden.bs.offcanvas ivin apin). |
getInstance |
Statik we de alaw yu fɔ gɛt di ɔfkanvas instans we gɛt fɔ du wit wan DOM ɛlimɛnt |
getOrCreateInstance |
Statik we de alaw yu fɔ gɛt di ɔfkanvas instans we gɛt fɔ du wit wan DOM ɛlimɛnt, ɔ mek wan nyu wan insay kes we dɛn nɔ bin initialize am |
Di tin dɛn we kin apin
Bootstrap in ɔfkanvas klas de ɛksplɔz sɔm ivin dɛn fɔ huk insay ɔfkanvas funkshɔnaliti.
Di kayn tin we apin | Tɔk bɔt |
---|---|
show.bs.offcanvas |
Dis ivent de faya wantɛm wantɛm we dɛn kɔl di show instans mɛtɔd. |
shown.bs.offcanvas |
Dis ivent de faya we dɛn dɔn mek wan ɔfkanvas ɛlimɛnt fɔ si to di yuza (go wet fɔ CSS transishɔn dɛn fɔ dɔn). |
hide.bs.offcanvas |
Dis ivent de faya wantɛm wantɛm we hide dɛn dɔn kɔl di we aw dɛn de du am. |
hidden.bs.offcanvas |
Dis ivent de faya we dɛn dɔn ayd wan ɔfkanvas ɛlimɛnt frɔm di yuza (go wet fɔ mek CSS transishɔn dɛn dɔn). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})