Dze anyi
Trɔ asi le emenyawo ƒe dzedzeme ŋu le wò dɔa katã me kple klass ʋee aɖewo kple míaƒe JavaScript ƒe kpeɖeŋutɔwo.
Ale si wòwɔa dɔe
Wozãa collapse JavaScript plugin tsɔ ɖea emenyawo fiana heɣlaa wo. Wozãa abɔtawo alo sekewo abe nusiwo aʋã wo ene siwo wowɔ ɖe nɔnɔmetata dzi na nu tɔxɛ aɖewo siwo nètrɔna. Ne ègbã element aɖe la, ana agbe nanɔ agbe height
tso eƒe asixɔxɔ si li fifia dzi va ɖo 0
. Ne míebu alesi CSS wɔa nu ɖe nɔnɔmetatawo ŋui ŋu la, màte ŋu azãe padding
ɖe .collapse
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ŋu
Zi abɔti siwo le ete dzi be nàɖe nu bubu aɖe afia ahaɣlae to klass ƒe tɔtrɔwo dzi:
.collapse
ɣlaa nyatakaka siwo le eme.collapsing
wozãnɛ le tɔtrɔwo me.collapse.show
ɖea emenyawo fiana
Zi geɖe la, míeɖo aɖaŋu be nàzã abɔta si me data-bs-target
nɔnɔmea le. Togbɔ be womeɖo aɖaŋu le gɔmesese ƒe nukpɔsusu nu o hã la, àte ŋu azã kadodo si me href
nɔnɔmea le (kple a role="button"
). Le go eveawo siaa me la, data-bs-toggle="collapse"
wobia tso ame si.
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
Taɖodzinu geɖe
A <button>
alo <a>
ateŋu aɖe nu geɖewo afia ahaɣla wo to wo yɔyɔ kple tiatiawɔla le eƒe href
alo data-bs-target
nɔnɔme me. Geɖe <button>
alo <a>
ateŋu aɖe element aɖe afia ahaɣlae ne wo dometɔ ɖesiaɖe ƒo nu tso eŋu kple woƒe href
alo data-bs-target
nɔnɔme
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ
Kpɔ egbɔ be yetsɔe kpe aria-expanded
ɖe nusi dzi wokpɔna ŋu. Nɔnɔme sia ɖea nusi woate ŋu agbã si wobla ɖe dziɖuɖua ŋu ƒe nɔnɔme fifia fiana tẽe na screen readers kple kpekpeɖeŋu mɔ̃ɖaŋununya mawo tɔgbe. Ne wotu nusi woateŋu agbã la le gɔmedzedzea me la, ele be nɔnɔme si le dziɖuɖu ƒe akpaa dzi ƒe asixɔxɔ nanye aria-expanded="false"
. Ne èɖo collapsible element la be wòaʋu le gɔmedzedzea me to show
klass la zazã me la, ɖoe aria-expanded="true"
ɖe control la dzi boŋ. Plugin la atrɔ nɔnɔme sia le eɖokui si le dziɖuɖua dzi le esi woʋu alo wotu nu si woate ŋu agbã la alo womeʋui o nu (to JavaScript dzi, alo le esi zãla la ʋu dziɖuɖu ƒe akpa bubu si hã bla ɖe nu ma ke si woate ŋu agbã la ŋu ta). Ne dziɖuɖu ƒe akpaa ƒe HTML akpaa menye abɔta o (le kpɔɖeŋu me, an <a>
alo <div>
), nɔnɔmearole="button"
ele be woatsɔe akpe ɖe element la ŋu.
Ne wò dziɖuɖu ƒe akpaa le taɖodzinu ɖom ɖe nu ɖeka si woate ŋu agbã ŋu – i.e. data-bs-target
nɔnɔme la le asi fiam id
tiatiawɔla aɖe – ele be nàtsɔ aria-controls
nɔnɔmea akpe ɖe dziɖuɖu ƒe akpaa ŋu, si me akpa id
si woate ŋu agbã la ƒe la le. Egbegbe screen readerwo kple mɔ̃ɖaŋununya mawo tɔgbe siwo kpena ɖe ame ŋu wɔa nɔnɔme sia ŋudɔ tsɔ naa mɔ kpui bubuwo ezãlawo be woazɔ mɔ ayi nusi woate ŋu agbã la ŋutɔ gbɔ tẽ.
De dzesii be Bootstrap ƒe dɔwɔwɔ fifia meku ɖe keyboard ƒe kadodo vovovo siwo woateŋu awɔ si ŋu woƒo nu tsoe le WAI-ARIA Authoring Practices 1.1 accordion ƒe nɔnɔme me ŋu o - ahiã be wò ŋutɔ nàtsɔ esiawo ade JavaScript tɔxɛa me.
Sass ƒe nyawo
Nusiwo trɔna
$transition-collapse: height .35s ease;
Klasswo me
Woateŋu akpɔ collapse tɔtrɔ ƒe klasswo le scss/_transitions.scss
abe esiawo ma le akpa geɖewo me (collapse kple accordion).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Zãzã
Collapse plugin la zãa klass ʋee aɖewo tsɔ kpɔa kpekpeme kɔkɔa gbɔ:
.collapse
ɣlaa emenyawo.collapse.show
ɖea emenyawo fiana.collapsing
wotsɔa kpenɛ ne tɔtrɔa dze egɔme, eye woɖenɛ ɖa ne ewu enu
Woate ŋu akpɔ klass siawo le _transitions.scss
.
To nyatakaka ƒe nɔnɔmewo dzi
Ðeko nàtsɔ data-bs-toggle="collapse"
kple a akpe data-bs-target
ɖe element la ŋu be nàde dɔ asi na element ɖeka alo esi wu nenema si woate ŋu agbã la dzi kpɔkpɔ le eɖokui si. Nɔnɔmea data-bs-target
xɔa CSS tiatia aɖe be woatsɔ awɔ collapse la ŋudɔ ɖe. Kpɔ egbɔ be yetsɔ klass la kpe collapse
ɖe nusi woate ŋu agbã ŋu. Ne èdi be wòaʋu le gɔmedzedzea me la, tsɔ klass bubu kpee show
.
Be nàtsɔ ƒuƒoƒodzikpɔkpɔ si le abe accordion ene akpe ɖe teƒe si woate ŋu agbã ŋu la, tsɔ nyatakaka ƒe nɔnɔme kpe ɖe eŋu data-bs-parent="#selector"
. Kpɔ demo la be nàkpɔ esia le dɔwɔwɔ me.
To JavaScript dzi
Na wòawɔ dɔ kple asi kple:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
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-parent=""
.
Ŋkɔ | Ƒomevi | Gᴐmedzeƒe | Nuɖᴐɖᴐ |
---|---|---|---|
parent |
tiatiawɔla | jQuery ƒe nu | DOM ƒe akpa aɖe | false |
Ne dzila na la, ekema woatu nusiwo katã woateŋu agbã le dzila si woɖo la te ne woɖe nu sia si woateŋu agbã la fia. (si sɔ kple accordion ƒe nuwɔna deŋgɔ - esia nɔ te ɖe card klass la dzi). Ele be woaɖo nɔnɔmea ɖe taɖodzinu si woate ŋu agbã la dzi. |
toggle |
boolean ƒe ƒuƒoƒo | true |
Trɔa nusi woate ŋu agbã la le yɔyɔ dzi |
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 nusi woate ŋu agbã ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object
.
Àteŋu awɔ collapse instance kple constructor la, le kpɔɖeŋu me:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Nuwɔmɔnu | Nuɖᴐɖᴐ |
---|---|
toggle |
Trɔa nusi woate ŋu agbã la ɖe nusi woɖe fia alo woɣla ɖe eme. Trɔ yi yɔla gbɔ hafi woɖe nusi woateŋu agbã la afia ŋutɔŋutɔ alo aɣlae (si nye hafi shown.bs.collapse alo hidden.bs.collapse nudzɔdzɔa nadzɔ). |
show |
Fia nusi woate ŋu agbã. Trɔ yi yɔla gbɔ hafi woɖe nusi woateŋu agbã la afia ŋutɔŋutɔ (le kpɔɖeŋu me, hafi shown.bs.collapse nudzɔdzɔa nadzɔ). |
hide |
Eɣlaa nusi woate ŋu agbã. Trɔ yi yɔla gbɔ hafi woɣla nusi woateŋu agbã la ŋutɔŋutɔ (le kpɔɖeŋu me, hafi hidden.bs.collapse nudzɔdzɔa nadzɔ). |
dispose |
Egblẽa nu le nu vevi aɖe ƒe anyidzedze ŋu. (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM ƒe akpaa dzi ɖa) |
getInstance |
Static mɔnu si ɖea mɔ na wò be nàxɔ collapse instance si do ƒome kple DOM element aɖe, àteŋu azãe ale:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Static mɔnu si trɔa collapse instance si do ƒome kple DOM element alo wɔa yeye nenye be womedze egɔme o. Àte ŋu azãe ale:bootstrap.Collapse.getOrCreateInstance(element) |
Nudzɔdzɔwo
Bootstrap ƒe collapse klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe collapse dɔwɔwɔ me.
Nudzɔdzɔ ƒomevi | Nuɖᴐɖᴐ |
---|---|
show.bs.collapse |
Nudzɔdzɔ sia doa dzo enumake ne woyɔ show kpɔɖeŋu mɔnu la. |
shown.bs.collapse |
Woɖea nudzɔdzɔ sia ne wowɔ collapse element aɖe be wòadze na zãla (alala CSS ƒe tɔtrɔwo be woawu enu). |
hide.bs.collapse |
Wodaa tu nudzɔdzɔ sia enumake ne woyɔ hide mɔnua vɔ. |
hidden.bs.collapse |
Woɖea nudzɔdzɔ sia ne woɣla collapse element aɖe ɖe zãla la (alala be CSS ƒe tɔtrɔwo nawu enu). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})