Offcanvas ƒe akpa aɖe
Tu axadzinu ɣaɣlawo ɖe wò dɔa me hena mɔfiame, nuƒleɖakawo, kple bubuwo kple klass ʋee aɖewo kple míaƒe JavaScript ƒe kpeɖeŋutɔ.
Ale si wòwɔa dɔe
Offcanvas nye axadzinu ƒe akpa aɖe si woate ŋu atrɔ to JavaScript dzi be wòadze tso nukpɔkpɔa ƒe miame, ɖusime, alo ete. Wozãa abɔtawo alo sekewo abe nusiwo aʋã wo ene siwo wotsɔ kpe ɖe nu tɔxɛ siwo nètrɔna ŋu, eye data
wozãa nɔnɔmewo tsɔ yɔa míaƒe JavaScript.
- Offcanvas ma JavaScript ƒe kɔda ɖeka ma ke ƒe ɖewo abe modals ene. Le susu nu la, woɖi wo nɔewo kura, gake wonye plugins vovovowo.
- Nenema ke wonyi Sass ƒe tɔtrɔ aɖewo tsoƒe na offcanvas ƒe atsyãwo kple didimewo tso modal ƒe tɔtrɔwo me.
- Ne woɖee fia la, offcanvas la dea megbenya si woɖo ɖi si dzi nàte ŋu azi be nàɣla offcanvas la ɖe eme.
- Abe alesi wòle le modals gome ene la, offcanvas ɖeka koe woate ŋu aɖe afia le ɣeyiɣi ɖeka me.
Tawo yi dzi! Ne míebu alesi CSS wɔa nu ɖe nɔnɔmetatawo ŋui ŋu la, màte ŋu azã margin
alo translate
anɔ .offcanvas
element aɖe dzi o. Ke boŋ zã klass la abe nu babla ƒe akpa si le eɖokui si ene.
prefers-reduced-motion
nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasea dzi. Kpɔ
míaƒe mɔnukpɔkpɔwo ŋuti nuŋlɔɖiwo ƒe akpa si woɖe dzi kpɔtɔ .
Kpɔɖeŋuwo
Offcanvas ƒe akpa aɖewo
Le ete la, offcanvas ƒe kpɔɖeŋu si woɖe fia le gɔmedzedzea me (to .show
on .offcanvas
). Offcanvas ƒe akpa aɖewoe nye kpekpeɖeŋu na tanya si me wotu abɔta ɖo kple ŋutilã ƒe hatsotso si woate ŋu atia na gbãtɔ aɖewo padding
. Míele aɖaŋu ɖom be nàtsɔ offcanvas headers akpe ɖe dɔmeɖeɖe ƒe afɔɖeɖewo ŋu ɣesiaɣi si wòanya wɔ, alo nàna gbegbe ƒe afɔɖeɖe si me kɔ.
Offcanvas ƒe akpa aɖe
<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 ƒe wɔwɔfia
Zã abɔta siwo le ete nàtsɔ aɖe offcanvas element aɖe afia ahaɣlae to JavaScript si trɔa .show
klass la ɖe element aɖe dzi kple .offcanvas
klass la dzi.
.offcanvas
ɣlaa emenyawo (si woɖo ɖi) ..offcanvas.show
ɖea emenyawo fiana
Àte ŋu azã kadodo si me href
nɔnɔmea le, alo abɔta si me data-bs-target
nɔnɔmea le. Le go eveawo siaa me la, data-bs-toggle="offcanvas"
wobia tso ame si.
Offcanvas ƒe akpa aɖe
<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>
Amewo ɖoɖo ɖe teƒe aɖe
Womeɖo teƒe aɖeke si woɖo ɖi na offcanvas ƒe akpawo o, eyata ele be nàtsɔ tɔtrɔ ƒe hatsotso siwo le ete la dometɔ ɖeka akpe ɖe eŋu;
.offcanvas-start
tsɔa offcanvas ɖoa nukpɔkpɔƒea ƒe miame (woɖee fia le etame) ..offcanvas-end
tsɔa offcanvas ɖoa nukpɔkpɔƒea ƒe ɖusime.offcanvas-top
tsɔa offcanvas ɖoa nukpɔkpɔƒea tame.offcanvas-bottom
tsɔa offcanvas ɖoa nukpɔkpɔƒea ƒe gɔme
Te kpɔɖeŋu siwo le etame, ɖusime, kple ete la kpɔ le ete.
Offcanvas ƒe tame
<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 ƒe ɖusime
<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 ƒe gɔme
<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>
Megbenyawo
Wotsia <body>
element la ʋuʋu nu ne offcanvas kple eƒe megbenya le dzedzem. Zã data-bs-scroll
nɔnɔmea nàtsɔ atrɔ asi le <body>
ʋuʋu data-bs-backdrop
ŋu eye nàtrɔ megbenya la.
Wotsɔ agbalẽ xatsaxatsa de amae
Te kpɔ nàʋu axaa ƒe akpa mamlɛa be nàkpɔ tiatia sia le dɔ wɔm.
Offcanvas kple megbenyawo
.....
Wotsɔ agbalẽ xatsaxatsawo ɖo megbe nɛ
Te kpɔ nàʋu axaa ƒe akpa mamlɛa be nàkpɔ tiatia sia le dɔ wɔm.
<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>
Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ
Esi wònye be offcanvas panel la nye modal dialog le susu nu ta la, kpɔ egbɔ be yetsɔ kpe ɖe aria-labelledby="..."
—si ƒo nu tso offcanvas ƒe tanya ŋu—ɖe .offcanvas
. De dzesii be mehiã be nàtsɔe akpe ɖe eŋu o role="dialog"
elabena míetsɔe kpe ɖe eŋu xoxo to JavaScript dzi.
Sass ƒe nyawo
Nusiwo trɔna
$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;
Zãzã
Offcanvas plugin la zãa klass ʋee aɖewo kple nɔnɔmewo tsɔ kpɔa kpekpeme kɔkɔa gbɔ:
.offcanvas
ɣlaa emenyawo.offcanvas.show
ɖea emenyawo fiana.offcanvas-start
ɣlaa offcanvas la ɖe miame.offcanvas-end
ɣlaa offcanvas la ɖe ɖusime.offcanvas-bottom
ɣlaa offcanvas la ɖe ete
Tsɔ dismiss button kpe ɖe data-bs-dismiss="offcanvas"
attribute la ŋu, si aʋã JavaScript ƒe dɔwɔwɔ. Kpɔ egbɔ be yezã <button>
element la kplii hena nuwɔna nyuitɔ le mɔ̃wo katã dzi.
To nyatakaka ƒe nɔnɔmewo dzi
Tsɔ data-bs-toggle="offcanvas"
kple a data-bs-target
alo href
kpe ɖe element la ŋu be nàde dɔ asi na offcanvas element ɖeka ƒe dziɖuɖu le eɖokui si. Nɔnɔmea data-bs-target
xɔa CSS tiatia aɖe be woatsɔ awɔ offcanvas la ŋudɔ ɖe. Kpɔ egbɔ be yetsɔ klass la offcanvas
kpe ɖe offcanvas element la ŋu. Ne èdi be wòaʋu le gɔmedzedzea me la, tsɔ klass bubu kpee show
.
To JavaScript dzi
Na wòawɔ dɔ kple asi kple:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Tiatiawɔblɔɖewo
Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-bs-
, abe alesi wòle le data-bs-backdrop=""
.
Ŋkɔ | Ƒomevi | Gᴐmedzeƒe | Nuɖᴐɖᴐ |
---|---|---|---|
backdrop |
boolean ƒe ƒuƒoƒo | true |
De megbenya ɖe ŋutilã dzi esime offcanvas le ʋuʋu ɖi |
keyboard |
boolean ƒe ƒuƒoƒo | true |
Doa offcanvas la ne wozi escape key dzi |
scroll |
boolean ƒe ƒuƒoƒo | false |
Ðe mɔ na ŋutilã ƒe agbalẽxatsaxatsa esime offcanvas le ʋuʋu ɖi |
Mɔnuwo
Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo
API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .
Ewɔa wò nyatakakawo ŋudɔ abe offcanvas element ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object
.
Àteŋu awɔ offcanvas ƒe kpɔɖeŋu kple xɔtula, le kpɔɖeŋu me:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Nuwɔmɔnu | Nuɖᴐɖᴐ |
---|---|
toggle |
Trɔa offcanvas element aɖe be woaɖee afia alo aɣlae. Trɔ yi yɔla gbɔ hafi woɖe offcanvas element la fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.offcanvas alo hidden.bs.offcanvas nudzɔdzɔa nadzɔ). |
show |
Fia offcanvas ƒe akpa aɖe. Trɔ yi yɔla gbɔ hafi woɖe offcanvas element la fia ŋutɔŋutɔ (si nye hafi shown.bs.offcanvas nudzɔdzɔa nadzɔ). |
hide |
Ɣla offcanvas ƒe akpa aɖe. Trɔ yi yɔla gbɔ hafi woɣla offcanvas element la ŋutɔŋutɔ (si nye hafi hidden.bs.offcanvas nudzɔdzɔa nadzɔ). |
getInstance |
Static mɔnu si ɖea mɔ na wò be nàxɔ offcanvas ƒe kpɔɖeŋu si do ƒome kple DOM ƒe akpa aɖe |
getOrCreateInstance |
Static mɔnu si ɖea mɔ na wò be nàxɔ offcanvas ƒe kpɔɖeŋu si do ƒome kple DOM element, alo awɔ yeye nenye be womedze egɔme o |
Nudzɔdzɔwo
Bootstrap ƒe offcanvas klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe offcanvas dɔwɔwɔ me.
Nudzɔdzɔ ƒomevi | Nuɖᴐɖᴐ |
---|---|
show.bs.offcanvas |
Nudzɔdzɔ sia doa dzo enumake ne woyɔ show kpɔɖeŋu mɔnu la. |
shown.bs.offcanvas |
Woɖea nudzɔdzɔ sia ne wowɔ offcanvas element aɖe be wòadze na zãla (alala be CSS ƒe tɔtrɔwo nawu enu). |
hide.bs.offcanvas |
Wodaa tu nudzɔdzɔ sia enumake ne woyɔ hide mɔnua vɔ. |
hidden.bs.offcanvas |
Woɖea nudzɔdzɔ sia ne woɣla offcanvas element aɖe ɖe zãla la (alala be CSS ƒe tɔtrɔwo nawu enu). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})