Gu
Fa adesua kakraa bi ne yɛn JavaScript plugins no sesa nneɛma a wotumi hu wɔ wo dwumadi no nyinaa mu.
Sɛnea ɛyɛ adwuma
Collapse JavaScript plugin no na wɔde kyerɛ na wɔde sie nsɛm a ɛwɔ mu. Wɔde bɔton anaa ankora di dwuma sɛ triggers a wɔde map ayɛ nneɛma pɔtee bi a wodannan no. Sɛ wobubu element bi a, ɛbɛma woanya nkwa height
afi ne bo a ɛsom mprempren no so akɔ 0
. Sɛ wode sɛnea CSS di animations ho dwuma a, wuntumi mfa nni dwuma padding
wɔ .collapse
element bi so. Mmom no, fa adesuakuw no di dwuma sɛ ade a wɔde kyekyere nneɛma ho a ɛde ne ho.
prefers-reduced-motion
media asɛmmisa no so. Hwɛ
yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .
Nhwɛsoɔ
Klik buttons a ɛwɔ aseɛ ha no so na kyerɛ na fa element foforɔ bi sie denam class nsakraeɛ so:
.collapse
de nsɛm a ɛwɔ mu no sie.collapsing
wɔde di dwuma wɔ nsakrae ahorow mu.collapse.show
kyerɛ emu nsɛm
Mpɛn pii no, yɛkamfo kyerɛ sɛ fa bɔtn bi a ɛwɔ data-bs-target
su no di dwuma. Bere a wɔmfa nkamfo nkyerɛ wɔ nkyerɛase kwan so no, wubetumi nso de link a ɛwɔ href
su no (ne a role="button"
) adi dwuma. Wɔ nsɛm abien no nyinaa mu no, data-bs-toggle="collapse"
wɔhwehwɛ sɛ wɔyɛ saa.
<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>
Nneɛma pii a wɔde asi wɔn ani so
A <button>
anaa <a>
betumi akyerɛ na ɔde nneɛma pii asie denam reference a ɔde paw nea ɛwɔ ne href
anaa data-bs-target
su no mu no so. Multiple <button>
anaasɛ <a>
wobetumi akyerɛ na wɔde element bi asie sɛ wɔn mu biara de wɔn href
anaa data-bs-target
attribute kyerɛ no a
<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>
Nneɛma a wotumi nya
Hwɛ hu sɛ wode bi bɛka aria-expanded
control element no ho. Saa su yi da mprempren tebea a ɛwɔ ade a ɛtumi hwe ase a wɔakyekyere no wɔ control no ho no adi pefee ma screen akenkanfo ne mfiridwuma a ɛboa a ɛte saa ara. Sɛ wɔato element a ɛtumi collapsible no mu default so a, ɛsɛ sɛ attribute a ɛwɔ control element no so no nya boɔ a ɛyɛ aria-expanded="false"
. Sɛ woahyɛ collapsible element no sɛ ɛbɛbue default denam show
class no so a, fa aria-expanded="true"
si control no so mmom. Plugin no bɛdannan saa su yi wɔ control no so ankasa a egyina sɛ ebia wɔabue anaa wɔato mu anaasɛ wɔanto mu (ɛnam JavaScript so, anaasɛ esiane sɛ nea ɔde di dwuma no kanyan control element foforo a ɛsan nso kyekyere element koro no ara a wotumi bubu mu no so). Sɛ control element no HTML element no nyɛ button (sɛ nhwɛso no, an <a>
anaa <div>
), attribute norole="button"
ɛsɛ sɛ wɔde ka element no ho.
Sɛ wo control element no de n’ani si element baako a ɛtumi bu mu – kyerɛ sɛ, data-bs-target
su no rekyerɛ id
selector bi a – ɛsɛ sɛ wode aria-controls
attribute no ka control element no ho, a ɛwɔ id
of the collapsible element no mu. Nnɛyi screen akenkanfo ne mfiridwuma a ɛte saa a ɛboa no de saa su yi di dwuma de ma wɔn a wɔde di dwuma no nya akwan tiawa foforo a wɔbɛfa so akɔ element a wotumi bubu no ankasa so tẽẽ.
Hyɛ no nsow sɛ Bootstrap mprempren dwumadie no nkata keyboard nkitahodi ahodoɔ a wopɛ a wɔaka ho asɛm wɔ WAI-ARIA Authoring Practices 1.1 accordion nhwɛsoɔ no so - ɛho bɛhia sɛ w'ankasa wode yeinom bɛka JavaScript a wɔahyɛ da ayɛ ho.
Sass
Nneɛma a Ɛsakra
$transition-collapse: height .35s ease;
Adesua ahorow
Wobetumi ahu collapse nsakrae adesua ahorow wɔ mu scss/_transitions.scss
sɛnea eyinom kyɛ wɔ nneɛma pii mu (collapse ne accordion).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Sɛnea wɔde di dwuma
Collapse plugin no de adesua kakraa bi di dwuma de di nneɛma a emu yɛ duru a wɔma so no ho dwuma:
.collapse
de emu nsɛm no sie.collapse.show
kyerɛ emu nsɛm no.collapsing
wɔde ka ho bere a nsakrae no afi ase, na woyi fi hɔ bere a awie no
Wobetumi ahu saa adesua ahorow yi wɔ _transitions.scss
.
Via data su ahorow so
Kɛkɛ fa data-bs-toggle="collapse"
ne a data-bs-target
ka element no ho ma automatically assign control of one or more collapsible elements. Attribute no data-bs-target
gye CSS selector bi a wɔde collapse no bedi dwuma wɔ so. Hwɛ hu sɛ wode adesuakuw no bɛka collapse
element a wotumi bu no ho. Sɛ wopɛ sɛ ɛbue default a, fa adesua foforo no ka ho show
.
Sɛ wode kuw nhyehyɛe a ɛte sɛ accordion bɛka beae a wotumi bubu mu ho a, fa data su no ka ho data-bs-parent="#selector"
. Hwɛ demo no na woahu eyi wɔ adeyɛ mu.
Ɛdenam JavaScript so
Fa nsa yɛ adwuma denam:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Nneɛma a wubetumi apaw
Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-bs-
, sɛnea ɛwɔ data-bs-parent=""
.
Din | Korɔ | Mfiaseɛ | Nkyerɛmu |
---|---|---|---|
parent |
nea ɔpaw | jAsɛmmisa adeɛ | DOM element a ɛwɔ hɔ | false |
Sɛ wɔde ɔwofoɔ ma a, ɛnde wɔbɛto nneɛma a ɛtumi boaboa ano nyinaa a ɛwɔ ɔwofoɔ a wɔakyerɛ no ase no mu berɛ a wɔakyerɛ saa adeɛ a ɛtumi boaboa ano yi. (te sɛ atetesɛm accordion suban - eyi gyina card adesuakuw no so). Ɛsɛ sɛ wɔde su no si beae a wobetumi abubu no wɔ botae no so. |
toggle |
boolean ho asɛm | true |
Toggles element a ɛyɛ collapsible wɔ invocation so |
Akwan a wɔfa so yɛ
Asynchronous akwan ne nsakrae ahorow
API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛ no no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Nea ɛka ho no, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛrekɔ so no so .
Ɛma wo nsɛm no yɛ adwuma sɛ ade a wotumi bu mu. Gye akwan a wubetumi apaw bi tom object
.
Wubetumi de constructor no ayɛ collapse instance, sɛ nhwɛso no:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Ɔkwan | Nkyerɛmu |
---|---|
toggle |
Toggles a collapsible element ma wɔakyerɛ anaa wɔde asie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ element a wotumi bubu no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.collapse anaa hidden.bs.collapse adeyɛ no aba). |
show |
Kyerɛ element bi a ɛtumi hwe ase. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ element a wotumi bubu mu no ankasa (sɛ nhwɛso no, ansa na shown.bs.collapse asɛm no asi). |
hide |
Ɛde element bi a wotumi bubu mu sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde element a wotumi bubu no asie ankasa (sɛ nhwɛso no, ansa na hidden.bs.collapse asɛm no asi). |
dispose |
Ɔsɛe element bi a ɛrehwe ase. (Eyi data a wɔde asie wɔ DOM element no so) |
getInstance |
Static kwan a ɛma wo kwan ma wo nya collapse instance a ɛbata DOM element bi ho no, wubetumi de adi dwuma sɛnea eyi te:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Static kwan a ɛsan de collapse instance a ɛbata DOM element bi ho anaasɛ ɛbɔ foforo sɛ ɛba sɛ wɔanhyɛ aseɛ a. Wubetumi de adi dwuma sɛnea ɛte yi:bootstrap.Collapse.getOrCreateInstance(element) |
Nsɛm a esisi
Bootstrap no collapse adesua no da nsɛm kakraa bi a esisi ma hooking kɔ collapse dwumadi mu adi.
Adeyɛ no su | Nkyerɛmu |
---|---|
show.bs.collapse |
Saa adeyɛ yi tow ntɛm ara bere a show wɔfrɛ instance kwan no. |
shown.bs.collapse |
Wɔtow saa adeyɛ yi bere a wɔayɛ collapse element bi a ɔde di dwuma no ahu (bɛtwɛn ma CSS nsakrae ahorow no awie). |
hide.bs.collapse |
Wɔtow saa adeyɛ yi ntɛm ara bere a hide wɔafrɛ ɔkwan no awie no. |
hidden.bs.collapse |
Wɔtow saa adeyɛ yi bere a wɔde collapse element bi asie nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow no awie). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})