Collapse
Cambia a visibilità di u cuntenutu in u vostru prughjettu cù uni pochi di classi è i nostri plugins JavaScript.
Cumu funziona
U plugin JavaScript collapse hè utilizatu per vede è oculte u cuntenutu. I buttoni o l'ancore sò usati cum'è attivatori chì sò mappati à elementi specifichi chì toggle. Collapsed un elementu animarà u height
da u so valore attuale à 0
. Data cumu CSS gestisce l'animazioni, ùn pudete micca aduprà padding
nantu à un .collapse
elementu. Invece, aduprate a classa cum'è un elementu di imballaggio indipendente.
prefers-reduced-motion
media query. Vede a
sezione di movimentu ridottu di a nostra documentazione d'accessibilità .
Esempiu
Cliccate i buttoni sottu per vede è ammuccià un altru elementu via cambiamenti di classi:
.collapse
oculta u cuntenutu.collapsing
hè appiicata durante a transizione.collapse.show
mostra u cuntenutu
In generale, ricumandemu di utilizà un buttone cù l' data-bs-target
attributu. Mentre ùn hè micca cunsigliatu da un puntu di vista semanticu, pudete ancu aduprà un ligame cù l' href
attributu (è un role="button"
). In i dui casi, data-bs-toggle="collapse"
hè necessariu.
<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>
Orizzontale
U plugin collapse supporta ancu u colapsing horizontale. Aghjunghjite a .collapse-horizontal
classa di modificatore per a transizione width
invece di height
è stabilisce a width
nantu à l'elementu zitellu immediata. Sentite liberu di scrive u vostru propiu Sass persunalizatu, aduprate stili in linea, o aduprate e nostre utilità di larghezza .
min-height
set per evità di rimpianti eccessivi in i nostri documenti, questu ùn hè micca esplicitamente necessariu.
Solu l' width
elementu di u zitellu hè necessariu.
<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>
Obiettivi multipli
A <button>
o <a>
pò mustrà è ammuccià parechji elementi riferendu cù un selettore in u so href
o data-bs-target
attributu. Multiple <button>
o <a>
ponu mostrà è ammuccià un elementu se ognunu riferenzi cù u so href
o data-bs-target
attributu
<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>
L'accessibilità
Assicuratevi di aghjunghje aria-expanded
à l'elementu di cuntrollu. Questu attributu trasmette esplicitamente u statu attuale di l'elementu colapsibile ligatu à u cuntrollu à i lettori di schermu è tecnulugii assistivi simili. Se l'elementu colapsibile hè chjusu per automaticamente, l'attributu nantu à l'elementu di cuntrollu deve avè un valore di aria-expanded="false"
. Se avete stabilitu l'elementu colapsibile per esse apertu per automaticamente usendu a show
classa, mette aria-expanded="true"
nantu à u cuntrollu invece. U plugin cambia automaticamente stu attributu nantu à u cuntrollu basatu nantu à se l'elementu colapsibile hè statu apertu o chjusu (via JavaScript, o perchè l'utilizatore hà attivatu un altru elementu di cuntrollu ancu ligatu à u stessu elementu colapsable). Se l'elementu HTML di l'elementu di cuntrollu ùn hè micca un buttone (per esempiu, un <a>
o <div>
), l'attributurole="button"
deve esse aghjuntu à l'elementu.
Se u vostru elementu di cuntrollu hè destinatu à un unicu elementu colapsibile - vale à dì l' data-bs-target
attributu punta à un id
selettore - duvete aghjunghje l' aria-controls
attributu à l'elementu di cuntrollu, chì cuntene l' id
elementu colapsable. I lettori di schermu muderni è tecnulugii d'assistenza simili facenu usu di questu attributu per furnisce l'utilizatori cù accurtatoghji supplementari per navigà direttamente à l'elementu colapsibile stessu.
Nota chì l'implementazione attuale di Bootstrap ùn copre micca e diverse interazzioni di tastiere opzionali descritte in u mudellu di accordione di WAI-ARIA Authoring Practices 1.1 - avete bisognu di includà queste stessu cù JavaScript persunalizatu.
Sass
Variabili
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Classi
E classi di transizione di colapsu ponu esse truvate in scss/_transitions.scss
quantu sò spartuti in parechje cumpunenti (collapse è 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);
}
}
Usu
U plugin di colapsu utilizeghja uni pochi di classi per trattà a carica pesante:
.collapse
oculta u cuntenutu.collapse.show
mostra u cuntenutu.collapsing
hè aghjuntu quandu a transizione principia, è eliminata quandu finisce
Queste classi ponu esse truvate in _transitions.scss
.
Via attributi di dati
Basta aghjunghje data-bs-toggle="collapse"
è a data-bs-target
à l'elementu per assignà automaticamente u cuntrollu di unu o più elementi colapsibile. L' data-bs-target
attributu accetta un selettore CSS per applicà u colapsu. Assicuratevi di aghjunghje a classa collapse
à l'elementu colapsable. Se vulete chì l'apertura predefinita, aghjunghje a classa supplementaria show
.
Per aghjunghje una gestione di gruppu cum'è accordioni à una zona colapsibile, aghjunghje l'attributu di dati data-bs-parent="#selector"
. Consultate a pagina di l'accordione per più infurmazione.
Via JavaScript
Abilita manualmente cù:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Opzioni
L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-bs-
, cum'è in data-bs-parent=""
.
Nome | Tipu | Default | Descrizzione |
---|---|---|---|
parent |
selettore | oggettu jQuery | Elementu DOM | false |
Se u genitore hè furnitu, allora tutti l'elementi pieghevoli sottu u genitore specificatu seranu chjusi quandu questu articulu pieghevule hè mostratu. (simile à u cumpurtamentu tradiziunale di l'accordioni - questu dipende da a card classe). L'attributu deve esse stabilitu nantu à l'area colapsible di destinazione. |
toggle |
booleanu | true |
Commuta l'elementu colapsibile nantu à l'invucazione |
I metudi
Metudi asincroni è transizioni
Tutti i metudi API sò asincroni è cumincianu una transizione . Ritornanu à u chjamante appena a transizione hè iniziata, ma prima chì finisce . Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .
Vede a nostra documentazione JavaScript per più infurmazione .
Attiva u vostru cuntenutu cum'è un elementu colapsable. Accetta opzioni opzionali object
.
Pudete creà una istanza di colapsu cù u custruttore, per esempiu:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Metudu | Descrizzione |
---|---|
toggle |
Cambia un elementu pieghevule per esse mostratu o oculatu. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.collapse o hidden.bs.collapse si faci). |
show |
Mostra un elementu colapsable. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente mostratu (per esempiu, prima chì l' shown.bs.collapse avvenimentu si faci). |
hide |
Oculta un elementu colapsable. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu oculatu (per esempiu, prima chì l' hidden.bs.collapse avvenimentu si faci). |
dispose |
Distrughje u colapsu di un elementu. (Elimina i dati almacenati nantu à l'elementu DOM) |
getInstance |
Metudu staticu chì permette di ottene l'istanza di colapsu assuciata à un elementu DOM, pudete aduprà cusì:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Metudu staticu chì torna una istanza di colapsu assuciata à un elementu DOM o crea un novu in casu ùn hè micca inizializatu. Pudete aduprà cusì:bootstrap.Collapse.getOrCreateInstance(element) |
Avvenimenti
A classa di colapsu di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità di colapsu.
Tipu di avvenimentu | Descrizzione |
---|---|
show.bs.collapse |
Questu avvenimentu spara immediatamente quandu u show metudu di istanza hè chjamatu. |
shown.bs.collapse |
Questu avvenimentu hè sparatu quandu un elementu di colapsu hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
hide.bs.collapse |
Stu avvenimentu hè sparatu immediatamente quandu u hide metudu hè statu chjamatu. |
hidden.bs.collapse |
Questu avvenimentu hè sparatu quandu un elementu di colapsu hè statu oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})