Romahdus
Muuta projektisi sisällön näkyvyyttä muutamilla luokilla ja JavaScript-laajennuksillamme.
Kuinka se toimii
Kutista JavaScript-laajennusta käytetään sisällön näyttämiseen ja piilottamiseen. Painikkeita tai ankkureita käytetään laukaisimina, jotka on yhdistetty tiettyihin elementteihin, joita vaihdat. Elementin tiivistäminen animoi height
sen nykyisestä arvosta arvoon 0
. Koska CSS käsittelee animaatioita, et voi käyttää padding
elementissä .collapse
. Käytä sen sijaan luokkaa itsenäisenä kääreelementtinä.
prefers-reduced-motion
mediakyselystä. Katso
esteettömyysdokumentaation osio liikkeen vähentämisestä .
Esimerkki
Napsauta alla olevia painikkeita näyttääksesi ja piilottaaksesi toisen elementin luokkamuutosten kautta:
.collapse
piilottaa sisällön.collapsing
käytetään siirtymien aikana.collapse.show
näyttää sisältöä
Yleensä suosittelemme painikkeen käyttöä data-bs-target
määritteen kanssa. Vaikka sitä ei suositella semanttisesta näkökulmasta, voit myös käyttää linkkiä href
attribuutilla (ja role="button"
). Molemmissa tapauksissa data-bs-toggle="collapse"
vaaditaan.
<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>
Vaakasuora
Collapse plugin tukee myös vaakasuuntaista kutistamista. Lisää .collapse-horizontal
muuntajaluokka siirtääksesi sen width
sijaan height
ja aseta width
välittömälle lapsielementille. Voit vapaasti kirjoittaa oman mukautetun Sassin, käyttää upotettuja tyylejä tai käyttää leveysapuohjelmiamme .
min-height
vältetään liialliset uudelleenmaalaukset asiakirjoissamme, tätä ei erikseen vaadita.
Vain width
lapsielementti vaaditaan.
<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>
Useita kohteita
A <button>
tai <a>
voi näyttää ja piilottaa useita elementtejä viittaamalla niihin valitsimella sen href
tai data-bs-target
attribuutissa. Useita <button>
tai <a>
voivat näyttää ja piilottaa elementin, jos jokainen viittaa siihen omalla href
tai data-bs-target
attribuutilla
<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>
Esteettömyys
Muista lisätä aria-expanded
ohjauselementtiin. Tämä attribuutti välittää nimenomaisesti ohjausobjektiin liitetyn kokoontaitettavan elementin nykyisen tilan näytönlukuohjelmiin ja vastaaviin aputekniikoihin. Jos kokoontaitettava elementti on oletuksena suljettu, ohjauselementin attribuutin arvon tulee olla aria-expanded="false"
. Jos olet asettanut kokoontaitettavan elementin oletusarvoisesti avoimeksi show
luokan avulla, aseta aria-expanded="true"
sen sijaan ohjausobjekti. Plugin vaihtaa automaattisesti tämän määritteen ohjausobjektissa sen perusteella, onko tiivistettävä elementti avattu vai suljettu (JavaScriptin kautta tai koska käyttäjä laukaisi toisen ohjauselementin, joka on myös sidottu samaan tiivistettävään elementtiin). Jos ohjauselementin HTML-elementti ei ole painike (esim. an <a>
tai <div>
), määriterole="button"
tulee lisätä elementtiin.
Jos ohjauselementtisi kohdistuu yhteen tiivistettävään elementtiin – eli data-bs-target
attribuutti osoittaa id
valitsimeen – sinun tulee lisätä aria-controls
attribuutti ohjauselementtiin, joka sisältää id
tiivistettävän elementin. Nykyaikaiset näytönlukijat ja vastaavat aputekniikat hyödyntävät tätä attribuuttia tarjotakseen käyttäjille lisäpikakuvakkeita, joilla he voivat siirtyä suoraan kokoontaitettavaan elementtiin.
Huomaa, että Bootstrapin nykyinen toteutus ei kata erilaisia valinnaisia näppäimistön vuorovaikutuksia, jotka on kuvattu WAI-ARIA Authoring Practices 1.1 -harmonikkakuviossa – sinun on sisällytettävä ne itse mukautettuun JavaScriptiin.
Sass
Muuttujat
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Luokat
Kutista siirtymäluokat löytyy osoitteesta, scss/_transitions.scss
koska ne jaetaan useiden komponenttien kesken (kolapsi ja harmonikka).
.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);
}
}
Käyttö
Collapse-laajennus käyttää muutamia luokkia raskaiden nostojen käsittelemiseen:
.collapse
piilottaa sisällön.collapse.show
näyttää sisällön.collapsing
lisätään, kun siirtymä alkaa, ja poistetaan, kun se päättyy
Nämä luokat löytyvät _transitions.scss
.
Tietomääritteiden kautta
Lisää vain data-bs-toggle="collapse"
ja a data-bs-target
elementtiin määrittääksesi automaattisesti yhden tai useamman kokoontaitettavan elementin hallinnan. Attribuutti data-bs-target
hyväksyy CSS-valitsimen, johon tiivistys sovelletaan. Muista lisätä luokka collapse
kokoontaitettavaan elementtiin. Jos haluat sen avautuvan oletusarvoisesti, lisää ylimääräinen luokka show
.
Jos haluat lisätä haitarimaista ryhmähallintaa kokoontaitettavalle alueelle, lisää data-attribuutti data-bs-parent="#selector"
. Katso lisätietoja haitarisivulta .
JavaScriptin kautta
Ota käyttöön manuaalisesti:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Vaihtoehdot
Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-bs-
, kuten kohdassa data-bs-parent=""
.
Nimi | Tyyppi | Oletus | Kuvaus |
---|---|---|---|
parent |
valitsin | jQuery-objekti | DOM-elementti | false |
Jos ylätaso on annettu, kaikki määritetyn ylätason alapuolella olevat tiivistettävät elementit suljetaan, kun tämä tiivistettävä kohde näytetään. (samanlainen kuin perinteinen haitarikäyttäytyminen - tämä riippuu card luokasta). Attribuutti on asetettava kohdealueelle. |
toggle |
boolean | true |
Vaihtaa kokoontaitettavan elementin kutsun yhteydessä |
menetelmät
Asynkroniset menetelmät ja siirtymät
Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .
Aktivoi sisältösi kokoontaitettavana elementtinä. Hyväksyy valinnaiset vaihtoehdot object
.
Voit luoda tiivistysesiintymän rakentajalla, esimerkiksi:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Menetelmä | Kuvaus |
---|---|
toggle |
Vaihtaa kokoontaitettavan elementin näytettäväksi tai piilotetuksi. Palaa soittajalle ennen kuin kokoontaitettava elementti on todella näkyvissä tai piilotettu (ts. ennen shown.bs.collapse tai hidden.bs.collapse tapahtumaa). |
show |
Näyttää kokoontaitettavan elementin. Palaa soittajalle ennen kuin kokoontaitettava elementti on tosiasiallisesti esitetty (esim. ennen shown.bs.collapse tapahtumaa). |
hide |
Piilottaa kokoontaitettavan elementin. Palaa soittajalle ennen kuin kokoontaitettava elementti on todella piilotettu (esim. ennen hidden.bs.collapse tapahtumaa). |
dispose |
Tuhoaa elementin romahtamisen. (Poistaa DOM-elementtiin tallennetut tiedot) |
getInstance |
Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän tiivistysesiintymän, voit käyttää sitä seuraavasti:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Staattinen menetelmä, joka palauttaa DOM-elementtiin liittyvän kutistavan ilmentymän tai luo uuden, jos sitä ei ole alustettu. Voit käyttää sitä näin:bootstrap.Collapse.getOrCreateInstance(element) |
Tapahtumat
Bootstrapin tiivistysluokka paljastaa muutamia tapahtumia, jotka liittyvät tiivistystoimintoon.
Tapahtumatyyppi | Kuvaus |
---|---|
show.bs.collapse |
Tämä tapahtuma käynnistyy välittömästi, kun show instanssimenetelmää kutsutaan. |
shown.bs.collapse |
Tämä tapahtuma käynnistyy, kun tiivistyselementti on tehty näkyväksi käyttäjälle (odottaa CSS-siirtymien valmistumista). |
hide.bs.collapse |
Tämä tapahtuma käynnistyy välittömästi, kun hide menetelmä on kutsuttu. |
hidden.bs.collapse |
Tämä tapahtuma käynnistyy, kun tiivistyselementti on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})