Romahdus

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ä.

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.

<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ään lapsielementtiin. Voit vapaasti kirjoittaa oman mukautetun Sassin, käyttää upotettuja tyylejä tai käyttää leveysapuohjelmiamme .

<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

<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 showluokkaa käyttämällä, 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 ARIA Authoring Practices Guide -oppaassa 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:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Vaihtoehdot

Koska valinnat voidaan välittää tietomääritteiden tai JavaScriptin kautta, voit liittää vaihtoehdon nimen kohtaan data-bs-, kuten data-bs-animation="{value}". Varmista, että vaihdat vaihtoehdon nimen tapaustyypin " camelCase " arvoksi " kebab-case ", kun välität valinnat tietomääritteiden kautta. Käytä data-bs-custom-class="beautifier"esimerkiksi data-bs-customClass="beautifier".

Bootstrap 5.2.0:sta lähtien kaikki komponentit tukevat kokeellista varattua dataattribuuttia, data-bs-configjoka voi sisältää yksinkertaisen komponenttimäärityksen JSON-merkkijonona. Kun elementillä on attribuutit data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", lopullinen titlearvo on 456ja erilliset tietoattribuutit ohittavat annetut arvot data-bs-config. Lisäksi olemassa olevat dataattribuutit voivat sisältää JSON-arvoja, kuten data-bs-delay='{"show":0,"hide":150}'.

menetelmät

Aktivoi sisältösi kokoontaitettavana elementtinä. Hyväksyy valinnaiset vaihtoehdot object.

Voit luoda tiivistysesiintymän rakentajalla, esimerkiksi:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Tapahtumat

Bootstrapin tiivistysluokka paljastaa muutamia tapahtumia, jotka liittyvät tiivistystoimintoon.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})