Romahdus
Muuta projektisi sisällön näkyvyyttä muutamilla luokilla ja JavaScript-laajennuksillamme.
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öä
Voit käyttää linkkiä href
määritteen kanssa tai painiketta data-target
määritteen kanssa. Molemmissa tapauksissa data-toggle="collapse"
vaaditaan.
<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">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
A <button>
tai <a>
voi näyttää ja piilottaa useita elementtejä viittaamalla niihin JQuery-valitsimella sen href
tai data-target
attribuutissa. Useita <button>
tai <a>
voivat näyttää ja piilottaa elementin, jos jokainen viittaa siihen omalla href
tai data-target
attribuutilla
<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">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
Korttikomponentin avulla voit laajentaa oletusarvoista tiivistystoimintoa luodaksesi haitari.
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
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
luokkaa käyttämällä, aseta aria-expanded="true"
sen sijaan ohjausobjekti. Plugin vaihtaa tämän määritteen automaattisesti 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-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 näppäimistön vuorovaikutuksia, jotka on kuvattu WAI-ARIA Authoring Practices 1.1 harmonikkakuviossa – sinun on sisällytettävä ne itse mukautetulla JavaScriptillä.
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
.
Lisää vain data-toggle="collapse"
ja a data-target
elementtiin määrittääksesi automaattisesti yhden tai useamman kokoontaitettavan elementin hallinnan. Attribuutti data-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-parent="#selector"
. Katso demo nähdäksesi tämän toiminnassa.
Ota käyttöön manuaalisesti:
Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-
, kuten kohdassa data-parent=""
.
Nimi | Tyyppi | Oletus | Kuvaus |
---|---|---|---|
vanhempi | valitsin | jQuery-objekti | DOM-elementti | väärä | 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. |
vaihtaa | boolean | totta | Vaihtaa kokoontaitettavan elementin kutsun yhteydessä |
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
.
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).
Näyttää kokoontaitettavan elementin. Palaa soittajalle ennen kuin kokoontaitettava elementti on todella näytetty (eli ennen shown.bs.collapse
tapahtumaa).
Piilottaa kokoontaitettavan elementin. Palaa soittajalle ennen kuin kokoontaitettava elementti on todella piilotettu (eli ennen hidden.bs.collapse
tapahtuman tapahtumista).
Tuhoaa elementin romahduksen.
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. |
näytetään.bs.kutistuminen | 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. |
piilotettu.bs.collapse | Tämä tapahtuma käynnistyy, kun tiivistyselementti on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista). |