Kolaps
Uključite vidljivost sadržaja u cijelom projektu pomoću nekoliko klasa i naših JavaScript dodataka.
Kako radi
JavaScript dodatak za sažimanje koristi se za prikazivanje i sakrivanje sadržaja. Dugmad ili sidra se koriste kao okidači koji su mapirani na određene elemente koje prebacujete. Sažimanje elementa će animirati height
iz njegove trenutne vrijednosti u 0
. S obzirom na to kako CSS rukuje animacijama, ne možete koristiti padding
na .collapse
elementu. Umjesto toga, koristite klasu kao nezavisni element omota.
prefers-reduced-motion
medijskom upitu. Pogledajte odjeljak o
smanjenom pokretu u našoj dokumentaciji o pristupačnosti .
Primjer
Kliknite na dugmad ispod da prikažete i sakrijete drugi element putem promjena klase:
.collapse
sakriva sadržaj.collapsing
primjenjuje se tokom prijelaza.collapse.show
prikazuje sadržaj
Općenito, preporučujemo korištenje gumba s data-target
atributom. Iako se ne preporučuje sa semantičke tačke gledišta, takođe možete koristiti vezu sa href
atributom (i role="button"
). U oba slučaja data-toggle="collapse"
je potrebno.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-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>
Horizontalno
Dodatak za kolaps također podržava horizontalno sažimanje. Dodajte .width
modifikatorsku klasu da biste prešli width
umjesto height
i postavite a width
na neposredni podređeni element. Slobodno napišite vlastiti prilagođeni Sass, koristite inline stilove ili koristite naše uslužne programe za širinu .
min-height
skup za izbjegavanje prekomjernog preslikavanja u našim dokumentima, to nije izričito potrebno.
Potreban je samo width
on podređeni element.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Više meta
A <button>
ili <a>
može prikazati i sakriti više elemenata upućivanjem na njih pomoću JQuery selektora u svom href
ili data-target
atributu. Višestruki <button>
ili <a>
mogu prikazati i sakriti element ako svaki od njih referencira sa svojim href
ili data-target
atributom
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-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>
Primjer harmonike
Koristeći komponentu kartice , možete proširiti zadano ponašanje sažimanja kako biste stvorili harmoniku. Da biste pravilno postigli stil harmonike, obavezno ga koristite .accordion
kao omot.
.show
klasi.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>
Pristupačnost
Obavezno dodajte aria-expanded
kontrolni element. Ovaj atribut eksplicitno prenosi trenutno stanje sklopivog elementa povezanog s kontrolom na čitače ekrana i slične pomoćne tehnologije. Ako je sklopivi element zatvoren prema zadanim postavkama, atribut na kontrolnom elementu trebao bi imati vrijednost aria-expanded="false"
. Ako ste postavili da sklopivi element bude otvoren prema zadanim postavkama pomoću show
klase, aria-expanded="true"
umjesto toga postavite na kontroli. Dodatak će automatski uključiti ovaj atribut na kontroli na osnovu toga da li je sklopivi element otvoren ili zatvoren (putem JavaScripta, ili zato što je korisnik pokrenuo drugi kontrolni element koji je također vezan za isti sklopivi element). Ako HTML element kontrolnog elementa nije dugme (npr. <a>
ili <div>
), atributrole="button"
treba dodati elementu.
Ako vaš kontrolni element cilja na jedan sklopivi element – tj. data-target
atribut pokazuje na id
selektor – trebali biste dodati aria-controls
atribut kontrolnom elementu koji sadrži id
element sklopivog elementa. Moderni čitači ekrana i slične pomoćne tehnologije koriste ovaj atribut kako bi korisnicima pružile dodatne prečice za navigaciju direktno do samog sklopivog elementa.
Imajte na umu da Bootstrap-ova trenutna implementacija ne pokriva različite interakcije tastature opisane u ARIA Authoring Practices Guide obrascu harmonike - morat ćete ih sami uključiti pomoću prilagođenog JavaScripta.
Upotreba
Dodatak za kolaps koristi nekoliko klasa za rukovanje teškim podizanjem:
.collapse
sakriva sadržaj.collapse.show
prikazuje sadržaj.collapsing
se dodaje kada prijelaz počne, a uklanja se kada se završi
Ovi časovi se mogu naći u _transitions.scss
.
Preko atributa podataka
Samo dodajte data-toggle="collapse"
i a data-target
elementu da automatski dodijelite kontrolu nad jednim ili više sklopivih elemenata. Atribut data-target
prihvaća CSS selektor za primjenu kolapsa na. Obavezno dodajte klasu collapse
sklopivom elementu. Ako želite da se zadano otvori, dodajte dodatnu klasu show
.
Da biste dodali upravljanje grupama nalik harmonici u sklopivu oblast, dodajte atribut podataka data-parent="#selector"
. Pogledajte demo da vidite ovo na djelu.
Preko JavaScripta
Omogućite ručno pomoću:
$('.collapse').collapse()
Opcije
Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka, dodajte naziv opcije u data-
, kao u data-parent=""
.
Ime | Tip | Default | Opis |
---|---|---|---|
roditelj | selektor | jQuery objekat | DOM element | false | Ako je naveden roditelj, tada će svi sklopivi elementi ispod navedenog nadređenog biti zatvoreni kada se prikaže ova sklopiva stavka. (slično tradicionalnom ponašanju harmonike - ovo zavisi od card klase). Atribut se mora postaviti na ciljno sklopivo područje. |
preklopiti | boolean | tačno | Uključuje sklopivi element pri pozivanju |
Metode
Asinhrone metode i prijelazi
Sve API metode su asinhrone i pokreću tranziciju . Oni se vraćaju pozivaocu čim prijelaz započne, ali prije nego što se završi . Osim toga, poziv metode na prelaznu komponentu će biti zanemaren .
Pogledajte našu JavaScript dokumentaciju za više informacija .
.collapse(options)
Aktivira vaš sadržaj kao sklopivi element. Prihvata opcione opcije object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Prebacuje sklopivi element na prikazan ili skriven. Vraća pozivaocu prije nego što je sklopivi element zapravo prikazan ili sakriven (tj. prije nego se dogodi događaj shown.bs.collapse
ili ).hidden.bs.collapse
.collapse('show')
Prikazuje sklopivi element. Vraća pozivaocu prije nego što je sklopivi element zapravo prikazan (tj. prije nego što se shown.bs.collapse
događaj dogodi).
.collapse('hide')
Sakriva sklopivi element. Vraća se pozivaocu prije nego što je sklopivi element zapravo skriven (tj. prije nego što se hidden.bs.collapse
događaj dogodi).
.collapse('dispose')
Uništava kolaps elementa.
Događaji
Bootstrapova klasa kolapsa izlaže nekoliko događaja za spajanje na funkcionalnost kolapsa.
Vrsta događaja | Opis |
---|---|
show.bs.collapse | Ovaj događaj se aktivira odmah kada show se pozove metoda instance. |
prikazano.bs.collapse | Ovaj događaj se pokreće kada se element sažimanja učini vidljivim korisniku (će čekati da se CSS tranzicije dovrše). |
hide.bs.collapse | Ovaj događaj se pokreće odmah kada je hide metoda pozvana. |
hidden.bs.collapse | Ovaj događaj se pokreće kada je element sažimanja skriven od korisnika (će čekati da se CSS prijelazi dovrše). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})