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>
Ne tɛtrɛtɛ mu
Collapse plugin no nso boa horizontal collapsing. Fa .collapse-horizontal
modifier class no ka ho ma nsakrae no width
mmom height
na hyehyɛ a width
wɔ ntɛm ara abofra element no so. Fa ahofadi kyerɛw w’ankasa Sass a wopɛ, fa inline styles di dwuma, anaa fa yɛn width utilities no di dwuma .
min-height
set a ɛbɛkwati repaint a ɛboro so wɔ yɛn docs mu no, eyi nyɛ nea wɔhwehwɛ pefee.
On width
the child element no nkutoo na ɛho hia.
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</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 nea ɔde paw nea ɛwɔ ne href
anaa data-bs-target
su no mu a ɔde bɛkyerɛkyerɛ 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 anaasɛ 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 ho). 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;
$transition-collapse-width: width .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);
&.collapse-horizontal {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
}
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 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 sohwɛ a ɛte sɛ accordion bɛka beae a wotumi bubu ho a, fa data su no ka ho data-bs-parent="#selector"
. Hwɛ accordion kratafa no na woanya ho nsɛm pii.
Ɛ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. (a ɛte sɛ atetesɛm accordion suban - eyi gyina card adesuakuw no so). Ɛsɛ sɛ wɔde attribute no si target collapsible area 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 . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra 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 wonya 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...
})