Pagbagsak
I-toggle ang visibility ng content sa iyong proyekto gamit ang ilang klase at ang aming mga plugin ng JavaScript.
Paano ito gumagana
Ang collapse JavaScript plugin ay ginagamit upang ipakita at itago ang nilalaman. Ginagamit ang mga button o anchor bilang mga trigger na nakamapa sa mga partikular na elemento na iyong i-toggle. Ang pag-collapse ng isang elemento ay magpapasigla sa height
mula sa kasalukuyang halaga nito hanggang sa 0
. Dahil sa kung paano pinangangasiwaan ng CSS ang mga animation, hindi mo magagamit padding
sa isang .collapse
elemento. Sa halip, gamitin ang klase bilang isang independiyenteng elemento ng pambalot.
prefers-reduced-motion
query ng media. Tingnan ang
seksyon ng pinababang paggalaw ng aming dokumentasyon ng accessibility .
Halimbawa
I-click ang mga button sa ibaba upang ipakita at itago ang isa pang elemento sa pamamagitan ng mga pagbabago sa klase:
.collapse
nagtatago ng nilalaman.collapsing
ay inilapat sa panahon ng mga transition.collapse.show
nagpapakita ng nilalaman
Sa pangkalahatan, inirerekomenda namin ang paggamit ng isang button na may data-bs-target
katangian. Bagama't hindi inirerekomenda mula sa isang semantic na pananaw, maaari ka ring gumamit ng isang link na may href
katangian (at isang role="button"
). Sa parehong mga kaso, ang data-bs-toggle="collapse"
ay kinakailangan.
<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>
Maramihang mga target
Ang <button>
o <a>
ay maaaring magpakita at magtago ng maraming elemento sa pamamagitan ng pagtukoy sa kanila ng isang tagapili sa href
o data-bs-target
katangian nito. Marami <button>
o <a>
maaaring magpakita at magtago ng isang elemento kung ire-reference nila ito sa kanilang href
o data-bs-target
attribute
<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>
Accessibility
Tiyaking idagdag aria-expanded
sa control element. Ang katangiang ito ay tahasang naghahatid ng kasalukuyang estado ng nati-collaps na elemento na nakatali sa kontrol sa mga screen reader at mga katulad na pantulong na teknolohiya. Kung ang collapsible na elemento ay sarado bilang default, ang attribute sa control element ay dapat may value na aria-expanded="false"
. Kung itinakda mo na ang collapsible na elemento ay bukas bilang default gamit ang show
klase, itakda aria-expanded="true"
na lang sa control. Awtomatikong i-toggle ng plugin ang attribute na ito sa control batay sa kung nabuksan o isinara ang collapsible na elemento (sa pamamagitan ng JavaScript, o dahil nag-trigger ang user ng isa pang control element na nakatali din sa parehong collapsible na elemento). Kung ang elementong HTML ng control element ay hindi isang button (hal., an <a>
or <div>
), ang attributerole="button"
dapat idagdag sa elemento.
Kung ang iyong control element ay nagta-target sa isang solong collapsible na elemento – ibig sabihin, ang data-bs-target
attribute ay tumuturo sa isang id
selector – dapat mong idagdag ang aria-controls
attribute sa control element, na naglalaman ng id
ng collapsible na elemento. Ginagamit ng mga makabagong screen reader at katulad na mga teknolohiyang pantulong ang katangiang ito upang bigyan ang mga user ng karagdagang mga shortcut upang direktang mag-navigate sa mismong na-collapsible na elemento.
Tandaan na ang kasalukuyang pagpapatupad ng Bootstrap ay hindi sumasaklaw sa iba't ibang opsyonal na pakikipag-ugnayan sa keyboard na inilarawan sa WAI-ARIA Authoring Practices 1.1 accordion pattern - kakailanganin mong isama ang mga ito sa iyong sarili sa custom na JavaScript.
Sass
Mga variable
$transition-collapse: height .35s ease;
Mga klase
Matatagpuan ang mga collapse transition classes scss/_transitions.scss
dahil ang mga ito ay ibinabahagi sa maraming bahagi (collapse at accordion).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Paggamit
Gumagamit ang collapse plugin ng ilang klase upang mahawakan ang mabigat na pag-aangat:
.collapse
nagtatago ng nilalaman.collapse.show
nagpapakita ng nilalaman.collapsing
ay idinaragdag kapag nagsimula ang paglipat, at inalis kapag natapos na ito
Ang mga klase na ito ay matatagpuan sa _transitions.scss
.
Sa pamamagitan ng mga katangian ng data
Idagdag lang data-bs-toggle="collapse"
at a data-bs-target
sa elemento para awtomatikong magtalaga ng kontrol sa isa o higit pang mga collapsible na elemento. Tumatanggap ang data-bs-target
attribute ng isang CSS selector para ilapat ang pag-collapse. Tiyaking idagdag ang klase collapse
sa collapsible na elemento. Kung gusto mo itong default na bukas, idagdag ang karagdagang klase show
.
Upang magdagdag ng mala-accordion na pamamahala ng pangkat sa isang collapsible na lugar, idagdag ang attribute ng data data-bs-parent="#selector"
. Sumangguni sa demo upang makita ito sa pagkilos.
Sa pamamagitan ng JavaScript
Paganahin nang manu-mano gamit ang:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Mga pagpipilian
Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-bs-
, tulad ng sa data-bs-parent=""
.
Pangalan | Uri | Default | Paglalarawan |
---|---|---|---|
parent |
tagapili | jQuery object | DOM na elemento | false |
Kung ang magulang ay ibinigay, ang lahat ng mga collapsible na elemento sa ilalim ng tinukoy na magulang ay isasara kapag ang collapsible na item na ito ay ipinakita. (katulad ng tradisyonal na pag-uugali ng akurdyon - ito ay nakasalalay sa card klase). Ang attribute ay kailangang itakda sa target na collapsible na lugar. |
toggle |
boolean | true |
I-toggle ang collapsible na elemento sa invocation |
Paraan
Mga asynchronous na pamamaraan at paglipat
Ang lahat ng mga pamamaraan ng API ay asynchronous at nagsisimula ng isang paglipat . Bumalik sila sa tumatawag sa sandaling magsimula ang paglipat ngunit bago ito matapos . Bilang karagdagan, babalewalain ang isang method call sa isang transitioning component .
Tingnan ang aming dokumentasyon ng JavaScript para sa higit pang impormasyon .
Ina-activate ang iyong content bilang isang collapsible na elemento. Tumatanggap ng opsyonal na opsyon object
.
Maaari kang lumikha ng isang halimbawa ng pagbagsak sa tagabuo, halimbawa:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Pamamaraan | Paglalarawan |
---|---|
toggle |
I-toggle ang isang nako-collaps na elemento sa ipinapakita o nakatago. Bumabalik sa tumatawag bago aktwal na naipakita o naitago ang nati-collaps na elemento (ibig sabihin, bago mangyari ang shown.bs.collapse o hidden.bs.collapse kaganapan). |
show |
Nagpapakita ng nati-collapse na elemento. Bumabalik sa tumatawag bago aktwal na naipakita ang collapsible na elemento (hal., bago shown.bs.collapse mangyari ang kaganapan). |
hide |
Itinatago ang isang collapsible na elemento. Bumabalik sa tumatawag bago pa talaga naitago ang collapsible na elemento (hal., bago hidden.bs.collapse mangyari ang kaganapan). |
dispose |
Sinisira ang pagbagsak ng isang elemento. (Aalisin ang nakaimbak na data sa elemento ng DOM) |
getInstance |
Static na paraan na nagbibigay-daan sa iyong makuha ang halimbawa ng pagbagsak na nauugnay sa isang elemento ng DOM, maaari mo itong gamitin tulad nito:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Static na pamamaraan na nagbabalik ng isang halimbawa ng pagbagsak na nauugnay sa isang elemento ng DOM o lumikha ng bago kung sakaling hindi ito nasimulan. Maaari mo itong gamitin tulad nito:bootstrap.Collapse.getOrCreateInstance(element) |
Mga kaganapan
Ang collapse class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa collapse functionality.
Uri ng kaganapan | Paglalarawan |
---|---|
show.bs.collapse |
Agad na gagana ang kaganapang ito kapag show tinawag ang paraan ng instance. |
shown.bs.collapse |
Ang kaganapang ito ay pinapagana kapag ang isang elemento ng pag-collapse ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS). |
hide.bs.collapse |
Ang kaganapang ito ay agad na pinapagana kapag ang hide pamamaraan ay tinawag na. |
hidden.bs.collapse |
Ang kaganapang ito ay pinapagana kapag ang isang elemento ng pag-collapse ay naitago mula sa user (maghihintay na makumpleto ang mga transition ng CSS). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})