Strni
Preklopite vidnost vsebine v vašem projektu z nekaj razredi in našimi vtičniki JavaScript.
Kako deluje
Vtičnik JavaScript za strnitev se uporablja za prikaz in skrivanje vsebine. Gumbi ali sidra se uporabljajo kot sprožilci, ki so preslikani na določene elemente, ki jih preklapljate. Strnjenje elementa bo animiralo height
iz trenutne vrednosti v 0
. Glede na to, kako CSS obravnava animacije, ne morete uporabiti padding
na .collapse
elementu. Namesto tega uporabite razred kot neodvisen ovojni element.
prefers-reduced-motion
medijske poizvedbe. Oglejte si razdelek o
zmanjšanem gibanju v naši dokumentaciji o dostopnosti .
Primer
Kliknite spodnje gumbe, da prikažete ali skrijete drug element prek sprememb razreda:
.collapse
skriva vsebino.collapsing
se uporablja med prehodi.collapse.show
prikazuje vsebino
Na splošno priporočamo uporabo gumba z data-bs-target
atributom. Čeprav ni priporočljivo s semantičnega vidika, lahko uporabite tudi povezavo z href
atributom (in role="button"
). V obeh primerih data-bs-toggle="collapse"
je potrebno.
<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>
Več ciljev
A <button>
ali <a>
lahko prikaže in skrije več elementov tako, da se nanje sklicuje z izbirnikom v svojem atributu href
ali . data-bs-target
Več <button>
ali <a>
lahko prikaže in skrije element, če se vsak sklicuje nanj s svojim href
ali data-bs-target
atributom
<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>
Dostopnost
Bodite prepričani, da dodate aria-expanded
v kontrolni element. Ta atribut izrecno posreduje trenutno stanje zložljivega elementa, povezanega s kontrolnikom, bralnikom zaslona in podobnim pomožnim tehnologijam. Če je zložljivi element privzeto zaprt, mora imeti atribut na nadzornem elementu vrednost aria-expanded="false"
. show
Če ste z razredom nastavili, da je zložljivi element privzeto odprt, ga aria-expanded="true"
namesto tega nastavite na kontrolniku. Vtičnik bo samodejno preklopil ta atribut na kontrolniku glede na to, ali je bil zložljivi element odprt ali zaprt (prek JavaScripta ali ker je uporabnik sprožil drug kontrolni element, prav tako povezan z istim zložljivim elementom). Če element HTML kontrolnika ni gumb (npr. <a>
ali <div>
), atributrole="button"
je treba dodati elementu.
Če vaš kontrolni element cilja na en sam zložljiv element – tj. data-bs-target
atribut kaže na id
izbirnik – dodajte aria-controls
atribut v kontrolni element, ki vsebuje id
element zložljivega elementa. Sodobni bralniki zaslona in podobne podporne tehnologije uporabljajo ta atribut, da uporabnikom zagotovijo dodatne bližnjice za navigacijo neposredno do samega zložljivega elementa.
Upoštevajte, da trenutna izvedba Bootstrapa ne pokriva različnih izbirnih interakcij s tipkovnico, opisanih v harmoničnem vzorcu WAI-ARIA Authoring Practices 1.1 – te boste morali vključiti sami z JavaScriptom po meri.
Sass
Spremenljivke
$transition-collapse: height .35s ease;
Razredi
Razrede prehoda strnitve lahko najdete v scss/_transitions.scss
, saj si jih deli več komponent (zrušitev in harmonika).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Uporaba
Vtičnik Collapse uporablja nekaj razredov za obvladovanje težkega dvigovanja:
.collapse
skriva vsebino.collapse.show
prikazuje vsebino.collapsing
se doda, ko se prehod začne, in odstrani, ko se konča
Te razrede lahko najdete v _transitions.scss
.
Preko podatkovnih atributov
Samo dodajte data-bs-toggle="collapse"
in data-bs-target
elementu, da samodejno dodelite nadzor nad enim ali več zložljivimi elementi. Atribut data-bs-target
sprejme izbirnik CSS za uporabo strnjenja. Ne pozabite dodati razreda collapse
zložljivemu elementu. Če želite, da se privzeto odpre, dodajte dodatni razred show
.
Če želite območju, ki ga je mogoče zložiti, dodati upravljanje skupine, podobno harmoniki, dodajte atribut podatkov data-bs-parent="#selector"
. Oglejte si predstavitev, da vidite to v akciji.
Prek JavaScripta
Omogoči ročno z:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Opcije
Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-bs-
, kot v data-bs-parent=""
.
Ime | Vrsta | Privzeto | Opis |
---|---|---|---|
parent |
selektor | jQuery predmet | element DOM | false |
Če je podan nadrejeni element, bodo vsi zložljivi elementi pod navedenim nadrejenim elementom zaprti, ko je prikazan ta zložljivi element. (podobno kot tradicionalno vedenje harmonike - to je odvisno od card razreda). Atribut mora biti nastavljen na ciljnem zložljivem območju. |
toggle |
logično | true |
Ob klicu preklopi zložljivi element |
Metode
Asinhrone metode in prehodi
Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .
Za več informacij si oglejte našo dokumentacijo JavaScript .
Aktivira vašo vsebino kot zložljiv element. Sprejema neobvezne možnosti object
.
Primerek strnjenja lahko ustvarite s konstruktorjem, na primer:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Metoda | Opis |
---|---|
toggle |
Preklopi zložljiv element med prikazanim ali skritim. Vrne se klicatelju, preden je zložljivi element dejansko prikazan ali skrit (tj. preden pride do dogodka shown.bs.collapse ali ).hidden.bs.collapse |
show |
Prikazuje zložljiv element. Vrne se klicatelju, preden je zložljivi element dejansko prikazan (npr. preden shown.bs.collapse pride do dogodka). |
hide |
Skrije zložljiv element. Vrne se klicatelju, preden je bil zložljivi element dejansko skrit (npr. preden hidden.bs.collapse pride do dogodka). |
dispose |
Uniči kolaps elementa. (Odstrani shranjene podatke v elementu DOM) |
getInstance |
Statično metodo, ki vam omogoča, da dobite primerek zrušitve, povezan z elementom DOM, lahko jo uporabite takole:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Statična metoda, ki vrne strnjeni primerek, povezan z elementom DOM, ali ustvari novega, če ni bil inicializiran. Uporabite ga lahko takole:bootstrap.Collapse.getOrCreateInstance(element) |
Dogodki
Bootstrapov razred kolapsa razkrije nekaj dogodkov za priključitev na funkcionalnost kolapsa.
Vrsta dogodka | Opis |
---|---|
show.bs.collapse |
Ta dogodek se sproži takoj, ko show se pokliče metoda primerka. |
shown.bs.collapse |
Ta dogodek se sproži, ko je element strnjenja viden uporabniku (počakal bo, da se prehodi CSS zaključijo). |
hide.bs.collapse |
Ta dogodek se sproži takoj, ko hide je bila metoda poklicana. |
hidden.bs.collapse |
Ta dogodek se sproži, ko je bil strnjeni element skrit pred uporabnikom (počakal bo, da se zaključijo prehodi CSS). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})