kolaps
Prepnite viditeľnosť obsahu vo svojom projekte pomocou niekoľkých tried a našich doplnkov JavaScript.
Ako to funguje
Zásuvný modul JavaScript sa používa na zobrazenie a skrytie obsahu. Tlačidlá alebo kotvy sa používajú ako spúšťače, ktoré sú namapované na konkrétne prvky, ktoré prepínate. Zbalením prvku sa prvok animuje height
z jeho aktuálnej hodnoty na 0
. Vzhľadom na to, ako CSS spracováva animácie, nemôžete použiť padding
na .collapse
prvok. Namiesto toho použite triedu ako nezávislý obalový prvok.
prefers-reduced-motion
mediálneho dopytu. Pozrite si
časť so zníženým pohybom v našej dokumentácii o prístupnosti .
Príklad
Kliknutím na tlačidlá nižšie zobrazíte a skryjete ďalší prvok prostredníctvom zmien triedy:
.collapse
skrýva obsah.collapsing
sa aplikuje pri prechodoch.collapse.show
zobrazuje obsah
Vo všeobecnosti odporúčame použiť tlačidlo s data-target
atribútom. Aj keď sa to zo sémantického hľadiska neodporúča, môžete použiť aj prepojenie s href
atribútom (a role="button"
). V oboch prípadoch data-toggle="collapse"
sa vyžaduje.
<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>
Horizontálne
Zásuvný modul pre zbalenie podporuje aj horizontálne zbalenie. Pridajte .width
triedu modifikátora na prechod triedy width
a height
nastavte a width
na bezprostredný podriadený prvok. Neváhajte a napíšte svoj vlastný Sass, použite vložené štýly alebo použite naše nástroje pre šírku .
min-height
nastavená možnosť vyhnúť sa nadmernému prekresľovaniu v našich dokumentoch, výslovne sa to nevyžaduje.
Vyžaduje sa iba width
prvok na podradenom prvku.
<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>
Viaceré ciele
A <button>
alebo <a>
môže zobraziť a skryť viacero prvkov tak, že na ne odkážete pomocou selektora JQuery vo svojom atribúte href
alebo . data-target
Viacnásobné <button>
alebo <a>
môžu zobraziť a skryť prvok, ak naň každý odkazuje svojím atribútom href
alebo data-target
atribútom
<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>
Príklad akordeónu
Pomocou komponentu karty môžete rozšíriť predvolené správanie zbalenia na vytvorenie akordeónu. Ak chcete správne dosiahnuť akordeónový štýl, nezabudnite ho použiť .accordion
ako obal.
.show
triede.
<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>
Prístupnosť
Nezabudnite pridať aria-expanded
do ovládacieho prvku. Tento atribút explicitne vyjadruje aktuálny stav skladacieho prvku spojeného s ovládacím prvkom čítačkám obrazovky a podobným asistenčným technológiám. Ak je skladací prvok predvolene zatvorený, atribút ovládacieho prvku by mal mať hodnotu aria-expanded="false"
. Ak ste nastavili, aby bol skladací prvok predvolene otvorený pomocou show
triedy, nastavte aria-expanded="true"
ho na ovládacom prvku. Doplnok automaticky prepne tento atribút na ovládacom prvku na základe toho, či bol alebo nebol skladací prvok otvorený alebo zatvorený (cez JavaScript, alebo pretože používateľ spustil iný ovládací prvok, ktorý je tiež viazaný na rovnaký skladací prvok). Ak prvkom HTML ovládacieho prvku nie je tlačidlo (napr. <a>
alebo <div>
), atribútrole="button"
treba pridať k prvku.
Ak je váš ovládací prvok zacielený na jeden skladací prvok – tj data-target
atribút ukazuje na id
selektor – mali by ste pridať aria-controls
atribút do ovládacieho prvku, ktorý obsahuje id
skladací prvok. Moderné čítačky obrazovky a podobné asistenčné technológie využívajú tento atribút na to, aby používateľom poskytli ďalšie skratky na prechod priamo na samotný skladací prvok.
Všimnite si, že súčasná implementácia Bootstrapu nepokrýva rôzne interakcie s klávesnicou popísané vo vzore akordeónu ARIA Authoring Practices Guide – budete ich musieť zahrnúť sami s vlastným JavaScriptom.
Použitie
Zásuvný modul kolaps využíva niekoľko tried na zvládnutie ťažkého zdvíhania:
.collapse
skrýva obsah.collapse.show
zobrazuje obsah.collapsing
sa pridá pri spustení prechodu a odstráni sa po jeho dokončení
Tieto triedy nájdete v _transitions.scss
.
Cez dátové atribúty
Stačí pridať data-toggle="collapse"
a data-target
k prvku a automaticky priradiť ovládanie jedného alebo viacerých skladacích prvkov. Atribút data-target
akceptuje selektor CSS, na ktorý sa má použiť zbalenie. Nezabudnite pridať triedu collapse
do skladacieho prvku. Ak chcete, aby bola predvolene otvorená, pridajte ďalšiu triedu show
.
Ak chcete do skladacej oblasti pridať správu skupiny podobnú akordeónu, pridajte atribút data data-parent="#selector"
. Pozrite si ukážku, aby ste to videli v akcii.
Cez JavaScript
Povoliť manuálne pomocou:
$('.collapse').collapse()
možnosti
Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-
, ako v data-parent=""
.
názov | Typ | Predvolené | Popis |
---|---|---|---|
rodič | volič | objekt jQuery | prvok DOM | falošný | Ak je zadaný rodič, potom sa všetky skladacie prvky pod zadaným nadradeným prvkom zatvoria, keď sa zobrazí táto skladacia položka. (podobné tradičnému správaniu na akordeóne - to závisí od card triedy). Atribút musí byť nastavený na cieľovú skladaciu oblasť. |
prepnúť | boolovská hodnota | pravda | Prepína zbaliteľný prvok pri vyvolaní |
Metódy
Asynchrónne metódy a prechody
Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .
.collapse(options)
Aktivuje váš obsah ako skladací prvok. Prijíma voliteľné možnosti object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Prepne zbaliteľný prvok na zobrazený alebo skrytý. Vráti sa k volajúcemu skôr, ako sa skladací prvok skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.collapse
alebo ).hidden.bs.collapse
.collapse('show')
Zobrazuje skladací prvok. Vráti sa k volajúcemu skôr, ako sa skladací prvok skutočne zobrazí (tj pred výskytom shown.bs.collapse
udalosti).
.collapse('hide')
Skryje skladací prvok. Vráti sa k volajúcemu skôr, ako bol skladací prvok skutočne skrytý (tj predtým, ako hidden.bs.collapse
dôjde k udalosti).
.collapse('dispose')
Zničí kolaps prvku.
Diania
Trieda zbalenia Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkcii zbalenia.
Typ udalosti | Popis |
---|---|
show.bs.kolaps | Táto udalosť sa spustí okamžite po show zavolaní metódy inštancie. |
zobrazené.bs.kolaps | Táto udalosť sa spustí, keď je prvok zbalenia viditeľný pre používateľa (bude čakať na dokončenie prechodov CSS). |
skryť.bs.kolaps | Táto udalosť sa spustí okamžite po hide zavolaní metódy. |
skrytý.bs.kolaps | Táto udalosť sa spustí, keď bol prvok zbalenia skrytý pred používateľom (bude čakať na dokončenie prechodov CSS). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})