Tolestu

Nola dabil

Tolestu JavaScript plugina edukia erakusteko eta ezkutatzeko erabiltzen da. Botoiak edo aingurak aktibatzen dituzun elementu espezifikoekin mapatzen diren abiarazle gisa erabiltzen dira. heightElementu bat tolestuz gero , bere uneko baliotik animatuko da 0. CSS-k animazioak nola kudeatzen dituen ikusita, ezin duzu elementu paddingbatean erabili. .collapseHorren ordez, erabili klasea biltzeko elementu independente gisa.

Adibidea

Egin klik beheko botoietan klase aldaketen bidez beste elementu bat erakusteko eta ezkutatzeko:

• .collapseedukia ezkutatzen du
• .collapsingtrantsizioetan aplikatzen da
• .collapse.showedukia erakusten du

Orokorrean, data-bs-targetatributua duen botoi bat erabiltzea gomendatzen dugu. Ikuspegi semantikotik gomendagarria ez den arren, hrefatributuarekin (eta role="button") esteka bat ere erabil dezakezu. Bi kasuetan, data-bs-toggle="collapse"beharrezkoa da.

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

Horizontala

Tolestu pluginak toleste horizontala ere onartzen du. Gehitu .collapse-horizontalmodifikatzailea klasearen widthordez transiziorako heighteta ezarri a widthberehalako elementu haurraren gainean. Anima zaitez zure Sass pertsonalizatua idazten, lineako estiloak erabili edo gure zabalera-utilitateak erabili .

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

Helburu anitz

A <button>edo <a>elementu anitz erakutsi eta ezkutatu ditzake bere hrefedo data-bs-targetatributuan hautatzaile batekin erreferentzia eginez. Anitzak <button>edo <a>elementu bat erakutsi eta ezkutatu dezake bakoitzak bere hrefedo data-bs-targetatributuarekin erreferentzia egiten badio

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

Irisgarritasuna

Ziurtatu aria-expandedkontrol-elementuari gehitzea. Atributu honek modu esplizituan adierazten die kontrolarekin lotutako elementu tolesgarriaren egungo egoera pantaila-irakurleei eta antzeko laguntza-teknologiei. Elementu tolesgarria lehenespenez itxita badago, kontrol-elementuaren atributuak balio izan beharko luke aria-expanded="false". Elementu tolesgarria lehenespenez irekita egon dadin ezarri baduzu showklasea erabiliz, ezarri aria-expanded="true"kontrolaren ordez. Pluginak atributu hau automatikoki aldatuko du kontrolean, elementu tolesgarria ireki edo itxi den ala ez kontuan hartuta (JavaScript bidez edo erabiltzaileak elementu tolesgarri berari lotuta dagoen beste kontrol-elementu bat abiarazi duelako). Kontrol-elementuaren HTML elementua botoi bat ez bada (adibidez, an <a>edo <div>), atributuarole="button"elementuari gehitu behar zaio.

Zure kontrol-elementuak elementu tolesgarri bakar batera bideratzen badu (hau da, data-bs-targetatributuak idhautatzaile batera seinalatzen badu) atributua gehitu behar diozu aria-controlskontrol-elementuari, idelementu tolesgarria duen. Pantaila-irakurle modernoek eta antzeko laguntza-teknologiek atributu hau erabiltzen dute erabiltzaileei lasterbide osagarriak eskaintzeko, elementu tolesgarrira zuzenean nabigatzeko.

Kontuan izan Bootstrap-en egungo inplementazioak ez dituela estaltzen ARIA Egile Praktiken Gida akordeoi ereduan deskribatutako teklatu-interakzio aukerako desberdinak; zuk zeuk sartu beharko dituzu JavaScript pertsonalizatuarekin.

Sass

Aldagaiak

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Klaseak

Tolestu trantsizio-klaseak aurki daitezke scss/_transitions.scss, osagai anitzetan partekatzen baitira (kolapsoa eta akordeoia).

.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);
  }
}

Erabilera

Tolestu pluginak klase batzuk erabiltzen ditu astunak kudeatzeko:

• .collapseedukia ezkutatzen du
• .collapse.showedukia erakusten du
• .collapsingtrantsizioa hasten denean gehitzen da, eta amaitzean kentzen da

Klase hauek atalean aurki daitezke _transitions.scss.

Datu-atributuen bidez

Gehitu data-bs-toggle="collapse"eta a data-bs-targetelementuari elementu tolesgarri baten edo gehiagoren kontrola automatikoki esleitzeko. Atributuak CSS hautatzaile bat onartzen du data-bs-targetkolapsoa aplikatzeko. Ziurtatu klasea gehitzen duzula collapseelementu tolesgarrian. Lehenetsita irekitzea nahi baduzu, gehitu klase gehigarria show.

Akordeoi moduko taldeen kudeaketa eremu tolesgarri batean gehitzeko, gehitu datu-atributua data-bs-parent="#selector". Informazio gehiagorako ikusi akordeoiaren orrialdera .

JavaScript bidez

Gaitu eskuz honekin:

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezkeenez, aukera-izen bat gehi diezaiokezu data-bs-, honela data-bs-animation="{value}". Ziurtatu aukera-izenaren kasu-mota " camelCase "-tik " kebab-case "-ra aldatzen duzula aukerak datu-atributuen bidez pasatzen dituzunean. Adibidez, erabili data-bs-custom-class="beautifier"ordez data-bs-customClass="beautifier".

Bootstrap 5.2.0-tik aurrera, osagai guztiek erreserbatutako datu-atributu esperimentaldata-bs-config bat onartzen dute , osagaien konfigurazio sinplea JSON kate gisa gorde dezakeena. Elementu batek data-bs-config='{"delay":0, "title":123}'eta data-bs-title="456"atributuak dituenean, azken titlebalioa izango da 456eta bereizitako datu-atributuek gailuan emandako balioak gainidatziko dituzte data-bs-config. Gainera, lehendik dauden datu-atributuek JSON balioak gorde ditzakete data-bs-delay='{"show":0,"hide":150}'.

Metodoak

Zure edukia elementu tolesgarri gisa aktibatzen du. Aukerako aukerak onartzen ditu object.

Tolesteko instantzia bat sor dezakezu konstruktorearekin, adibidez:

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

Gertaerak

Bootstrap-en kolapso-klaseak kolapso-funtzionalitatean konektatzeko gertaera batzuk erakusten ditu.

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