Kolaps
Uključite/isključite vidljivost sadržaja u svom projektu pomoću nekoliko klasa i naših JavaScript dodataka.
Kako radi
Sažeti JavaScript dodatak koristi se za prikazivanje i sakrivanje sadržaja. Gumbi ili sidra koriste se kao okidači koji se preslikavaju na određene elemente koje mijenjate. Sažimanje elementa će animirati height
iz njegove trenutne vrijednosti u 0
. S obzirom na to kako CSS obrađuje animacije, ne možete koristiti padding
na .collapse
elementu. Umjesto toga, koristite klasu kao neovisni element za omatanje.
prefers-reduced-motion
medijskom upitu. Pogledajte odjeljak
smanjenog kretanja u našoj dokumentaciji o pristupačnosti .
Primjer
Pritisnite donje gumbe za prikaz ili skrivanje drugog elementa putem promjena klase:
.collapse
skriva sadržaj.collapsing
primjenjuje se tijekom 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 točke gledišta, također možete koristiti vezu s href
atributom (i role="button"
). U oba slučaja data-toggle="collapse"
potrebno je.
<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 sažimanje također podržava horizontalno sažimanje. Dodajte .width
klasu modifikatora za prijelaz width
umjesto height
i postavite width
na neposredni podređeni element. Slobodno napišite vlastiti prilagođeni Sass, koristite ugrađene stilove ili koristite naše pomoćne programe za širinu .
min-height
skup za izbjegavanje pretjeranog ponovnog bojanja u našim dokumentima, to nije izričito potrebno.
Potreban je samo width
on the child 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 ciljeva
A <button>
ili <a>
može prikazati i sakriti više elemenata referenciranjem na njih s JQuery selektorom u svom href
ili data-target
atributu. Višestruki <button>
ili <a>
mogu prikazati i sakriti element ako svaki od njih upućuje na njega 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 da biste stvorili harmoniku. Da biste pravilno postigli stil harmonike, svakako 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
u kontrolni element. Ovaj atribut eksplicitno prenosi trenutačno stanje sklopivog elementa povezanog s kontrolom čitačima zaslona i sličnim pomoćnim tehnologijama. Ako je sklopivi element zatvoren prema zadanim postavkama, atribut na kontrolnom elementu trebao bi imati vrijednost aria-expanded="false"
. Ako ste sklopivi element postavili da bude otvoren prema zadanim postavkama pomoću show
klase, aria-expanded="true"
umjesto toga postavite na kontrolu. Dodatak će automatski prebaciti ovaj atribut na kontrolu na temelju toga je li sklopivi element otvoren ili zatvoren (preko JavaScripta ili zato što je korisnik pokrenuo drugi kontrolni element također povezan s istim sklopivim elementom). Ako HTML element kontrolnog elementa nije gumb (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 u kontrolni element koji sadrži id
element sklopivog elementa. Moderni čitači zaslona i slične pomoćne tehnologije koriste ovaj atribut kako bi korisnicima pružili dodatne prečace za izravnu navigaciju do samog sklopivog elementa.
Imajte na umu da trenutna implementacija Bootstrapa ne pokriva različite interakcije tipkovnice opisane u uzorku harmonike Vodiča za autorske prakse ARIA - morat ćete ih sami uključiti s prilagođenim JavaScriptom.
Korištenje
Dodatak za kolapsiranje koristi nekoliko klasa za rukovanje teškim dizanjem:
.collapse
skriva sadržaj.collapse.show
prikazuje sadržaj.collapsing
dodaje se kada prijelaz započne, a uklanja se kada završi
Ove se klase mogu pronaći u _transitions.scss
.
Preko atributa podataka
Samo dodajte data-toggle="collapse"
i data-target
elementu da biste automatski dodijelili kontrolu nad jednim ili više sklopivih elemenata. Atribut data-target
prihvaća CSS selektor na koji se primjenjuje sažimanje. Obavezno dodajte klasu collapse
sklopivom elementu. Ako želite da se prema zadanim postavkama otvori, dodajte dodatnu klasu show
.
Za dodavanje grupnog upravljanja poput harmonike u sklopivi prostor dodajte atribut podataka data-parent="#selector"
. Pogledajte demo kako biste vidjeli ovo na djelu.
Preko JavaScripta
Omogućite ručno pomoću:
$('.collapse').collapse()
Mogućnosti
Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-
, kao u data-parent=""
.
Ime | Tip | Zadano | Opis |
---|---|---|---|
roditelj | selektor | jQuery objekt | DOM element | lažno | Ako je naveden nadređeni element, tada će svi sklopivi elementi pod navedenim nadređenim elementom biti zatvoreni kada se prikaže ova sklopiva stavka. (slično tradicionalnom ponašanju harmonike - ovo ovisi o card klasi). Atribut mora biti postavljen na ciljno sklopivo područje. |
prebaciti | Booleov | pravi | Prebacuje sklopivi element na poziv |
Metode
Asinkrone metode i prijelazi
Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .
Pogledajte našu JavaScript dokumentaciju za više informacija .
.collapse(options)
Aktivira vaš sadržaj kao sklopivi element. Prihvaća izborne opcije object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Prebacuje sklopivi element na prikazan ili skriven. Vraća se pozivatelju prije nego što se sklopivi element stvarno prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.collapse
ili ).hidden.bs.collapse
.collapse('show')
Prikazuje sklopivi element. Vraća se pozivatelju prije nego što se sklopivi element stvarno prikaže (tj. prije nego što se shown.bs.collapse
događaj dogodi).
.collapse('hide')
Skriva sklopivi element. Vraća se pozivatelju 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 kolaps klasa izlaže nekoliko događaja za spajanje na kolaps funkcionalnost.
Vrsta događaja | Opis |
---|---|
pokazati.bs.srušiti | Ovaj događaj aktivira se odmah kada show se pozove metoda instance. |
prikazano.bs.srušiti | Ovaj se događaj pokreće kada se element sažimanja učini vidljivim korisniku (pričekat će da se CSS prijelazi završe). |
sakriti.bs.srušiti | Ovaj događaj se pokreće odmah nakon hide poziva metode. |
skriven.bs.srušiti | Ovaj se događaj pokreće kada je element sažimanja skriven od korisnika (pričekat će da se CSS prijelazi završe). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})