Siirry pääsisältöön Siirry dokumenttien navigointiin
in English

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 heightsen nykyisestä arvosta arvoon 0. Koska CSS käsittelee animaatioita, et voi käyttää paddingelementissä .collapse. Käytä sen sijaan luokkaa itsenäisenä kääreelementtinä.

Tämän komponentin animaatiovaikutus riippuu prefers-reduced-motionmediakyselystä. Katso esteettömyysdokumentaation osio liikkeen vähentämisestä .

Esimerkki

Napsauta alla olevia painikkeita näyttääksesi ja piilottaaksesi toisen elementin luokkamuutosten kautta:

  • .collapsepiilottaa sisällön
  • .collapsingkäytetään siirtymien aikana
  • .collapse.shownäyttää sisältöä

Yleensä suosittelemme painikkeen käyttöä data-bs-targetmääritteen kanssa. Vaikka sitä ei suositella semanttisesta näkökulmasta, voit myös käyttää linkkiä hrefattribuutilla (ja role="button"). Molemmissa tapauksissa data-bs-toggle="collapse"vaaditaan.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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-horizontalmuuntajaluokka siirtääksesi sen widthsijaan heightja aseta widthvälittömälle lapsielementille. Voit vapaasti kirjoittaa oman mukautetun Sassin, käyttää upotettuja tyylejä tai käyttää leveysapuohjelmiamme .

Huomaa, että vaikka alla olevassa esimerkissä min-heightvältetään liialliset uudelleenmaalaukset asiakirjoissamme, tätä ei erikseen vaadita. Vain widthlapsielementti vaaditaan.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<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 hreftai data-bs-targetattribuutissa. Useita <button>tai <a>voivat näyttää ja piilottaa elementin, jos jokainen viittaa siihen omalla hreftai data-bs-targetattribuutilla

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.
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.
<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-expandedohjauselementtiin. 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 showluokan 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-targetattribuutti osoittaa idvalitsimeen – sinun tulee lisätä aria-controlsattribuutti ohjauselementtiin, joka sisältää idtiivistettä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.scsskoska 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:

  • .collapsepiilottaa sisällön
  • .collapse.shownäyttää sisällön
  • .collapsinglisä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-targetelementtiin määrittääksesi automaattisesti yhden tai useamman kokoontaitettavan elementin hallinnan. Attribuutti data-bs-targethyväksyy CSS-valitsimen, johon tiivistys sovelletaan. Muista lisätä luokka collapsekokoontaitettavaan 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 cardluokasta). 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 .

Katso lisätietoja JavaScript - dokumentaatiostamme .

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.collapsetai hidden.bs.collapsetapahtumaa).
show Näyttää kokoontaitettavan elementin. Palaa soittajalle ennen kuin kokoontaitettava elementti on tosiasiallisesti esitetty (esim. ennen shown.bs.collapsetapahtumaa).
hide Piilottaa kokoontaitettavan elementin. Palaa soittajalle ennen kuin kokoontaitettava elementti on todella piilotettu (esim. ennen hidden.bs.collapsetapahtumaa).
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 showinstanssimenetelmää 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 hidemenetelmä 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...
})