Tonbe
Aktive vizibilite kontni atravè pwojè ou a ak kèk klas ak grefon JavaScript nou yo.
Ki jan li fonksyone
Yo itilize plugin JavaScript efondre pou montre ak kache kontni. Bouton oswa lank yo itilize kòm deklannche ki trase nan eleman espesifik ou aktive. Efondreman yon eleman pral anime a height
soti nan valè aktyèl li a 0
. Bay fason CSS okipe animasyon, ou pa ka itilize padding
sou yon .collapse
eleman. Olye de sa, sèvi ak klas la kòm yon eleman anbalaj endepandan.
prefers-reduced-motion
rechèch medya yo. Gade
seksyon mouvman redui nan dokiman aksè nou an .
Egzanp
Klike sou bouton ki anba yo pou montre ak kache yon lòt eleman atravè chanjman klas yo:
.collapse
kache kontni.collapsing
yo aplike pandan tranzisyon yo.collapse.show
montre kontni
Anjeneral, nou rekòmande pou itilize yon bouton ki gen data-bs-target
atribi a. Pandan ke yo pa rekòmande nan yon pwen de vi semantik, ou ka tou itilize yon lyen ak href
atribi a (ak yon role="button"
). Nan de ka yo, data-bs-toggle="collapse"
li nesesè.
<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>
Objektif miltip
Yon <button>
oswa <a>
ka montre ak kache plizyè eleman lè w refere yo ak yon seleksyon nan atribi href
li yo. data-bs-target
Plizyè <button>
oswa <a>
ka montre ak kache yon eleman si yo chak fè referans li ak atribi yo href
oswa yodata-bs-target
<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>
Aksesiblite
Asire ou ke ou ajoute aria-expanded
nan eleman kontwòl la. Atribi sa a eksplisitman transmèt eta aktyèl la nan eleman ki rabat la mare nan kontwòl la nan lektè ekran ak teknoloji asistans menm jan an. Si eleman plimyab la fèmen pa default, atribi sou eleman kontwòl la ta dwe gen yon valè aria-expanded="false"
. Si ou te mete eleman ki rabat la louvri pa default lè l sèvi avèk show
klas la, mete aria-expanded="true"
sou kontwòl la pito. Plugin a pral otomatikman baskile atribi sa a sou kontwòl la selon si wi ou non eleman ki plizyè a te louvri oswa fèmen (via JavaScript, oswa paske itilizatè a deklanche yon lòt eleman kontwòl tou mare nan menm eleman an pliable). Si eleman HTML eleman kontwòl la se pa yon bouton (egzanp, yon <a>
oswa <div>
), atribi arole="button"
ta dwe ajoute nan eleman an.
Si eleman kontwòl ou a ap vize yon sèl eleman ki rabat - sa vle di data-bs-target
atribi a ap lonje dwèt sou yon id
seleksyon - ou ta dwe ajoute aria-controls
atribi a nan eleman kontwòl la, ki gen ladan id
eleman ki pliye a. Lektè ekran modèn ak teknoloji asistans ki sanble yo sèvi ak atribi sa a pou bay itilizatè yo rakoursi adisyonèl pou navige dirèkteman nan eleman ki rabat nan tèt li.
Remake byen ke aplikasyon Bootstrap aktyèl la pa kouvri divès kalite entèraksyon klavye opsyonèl ki dekri nan modèl akòdeyon WAI-ARIA Authoring Practices 1.1 - w ap bezwen mete sa yo tèt ou ak JavaScript koutim.
Sass
Varyab
$transition-collapse: height .35s ease;
Klas
Yo ka jwenn klas tranzisyon yo nan efondreman scss/_transitions.scss
paske yo pataje plizyè eleman (effondreman ak akòdeyon).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Itilizasyon
Plugin efondreman an itilize kèk klas pou okipe leve lou:
.collapse
kache kontni an.collapse.show
montre kontni an.collapsing
yo ajoute lè tranzisyon an kòmanse, epi li retire lè li fini
Ou ka jwenn klas sa yo nan _transitions.scss
.
Via atribi done yo
Jis ajoute data-bs-toggle="collapse"
ak yon data-bs-target
nan eleman nan otomatikman bay kontwòl youn oswa plis eleman plim. Atribi a data-bs-target
aksepte yon seleksyon CSS pou aplike efondreman an. Asire ou ke ou ajoute klas collapse
la nan eleman ki rabat. Si ou ta renmen li louvri defo, ajoute klas adisyonèl la show
.
Pou ajoute jesyon gwoup ki sanble ak akòdeyon nan yon zòn ki rabat, ajoute atribi done yo data-bs-parent="#selector"
. Al gade nan Demo a pou wè sa a an aksyon.
Via JavaScript
Pèmèt manyèlman ak:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Opsyon
Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-bs-
, tankou nan data-bs-parent=""
.
Non | Kalite | Default | Deskripsyon |
---|---|---|---|
parent |
seleksyon | jQuery objè | Eleman DOM | false |
Si yo bay paran yo, lè sa a tout eleman plimyab ki anba paran espesifye yo pral fèmen lè yo montre atik plimyab sa a. (menm jan ak konpòtman akòdeyon tradisyonèl - sa a depann sou card klas la). Gen atribi a dwe mete sou zòn nan sib eklatman. |
toggle |
booleyen | true |
Aktivite eleman ki rabat sou envokasyon |
Metòd
Metòd asynchrone ak tranzisyon
Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .
Aktive kontni ou kòm yon eleman plim. Aksepte yon opsyon opsyonèl object
.
Ou ka kreye yon egzanp tonbe ak konstrukteur a, pou egzanp:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Metòd | Deskripsyon |
---|---|
toggle |
Baskile yon eleman ki rabat pou montre oswa kache. Retounen bay moun k ap rele a anvan yo te montre oswa kache eleman ki rabat (sa vle di anvan evènman shown.bs.collapse an hidden.bs.collapse rive). |
show |
Montre yon eleman rabat. Retounen bay moun k ap rele a anvan yo te montre eleman ki plizyè a (egzanp, anvan shown.bs.collapse evènman an rive). |
hide |
Kache yon eleman rabat. Retounen bay moun k ap rele a anvan yo te kache eleman ki rabat (egzanp, anvan hidden.bs.collapse evènman an rive). |
dispose |
Detwi efondreman yon eleman. (Retire done ki estoke sou eleman DOM) |
getInstance |
Metòd estatik ki pèmèt ou jwenn egzanp efondreman ki asosye ak yon eleman DOM, ou ka itilize li tankou sa a:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Metòd estatik ki retounen yon egzanp tonbe ki asosye ak yon eleman DOM oswa kreye yon nouvo nan ka li pa te inisyalize. Ou ka sèvi ak li tankou sa a:bootstrap.Collapse.getOrCreateInstance(element) |
Evènman
Klas efondreman Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite efondreman.
Kalite evènman | Deskripsyon |
---|---|
show.bs.collapse |
Evènman sa a dife imedyatman lè yo show rele metòd egzanp lan. |
shown.bs.collapse |
Evènman sa a revoke lè yon eleman tonbe vin vizib pou itilizatè a (ap tann tranzisyon CSS yo fini). |
hide.bs.collapse |
Evènman sa a te tire imedyatman lè yo hide te rele metòd la. |
hidden.bs.collapse |
Evènman sa a revoke lè yon eleman tonbe kache nan men itilizatè a (ap tann pou tranzisyon CSS fini). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})