Goqa

Isebenza kanjani

I-plugin ye-JavaScript yokugoqa isetshenziselwa ukubonisa nokufihla okuqukethwe. Izinkinobho noma amahange asetshenziswa njengezibangeli eziklanywe kuzinto ezithile ozishintshayo. Ukugoqa i-elementi kuzogqwayiza heightukusuka kunani layo lamanje kuye ku- 0. Uma kunikezwe ukuthi i-CSS iphatha kanjani ukugqwayiza, awukwazi ukusebenzisa paddingkusici .collapse. Kunalokho, sebenzisa ikilasi njengento yokugoqa ezimele.

Isibonelo

Chofoza izinkinobho ezingezansi ukuze ubonise futhi ufihle enye into ngezinguquko zekilasi:

• .collapseifihla okuqukethwe
• .collapsingisetshenziswa ngesikhathi soshintsho
• .collapse.showikhombisa okuqukethwe

Ngokuvamile, sincoma ukusebenzisa inkinobho data-bs-targetenesibaluli. Nakuba kunganconywa endaweni yokubuka ye-semantic, ungasebenzisa futhi isixhumanisi hrefesinesibaluli (kanye ne- role="button"). Kuzo zombili izimo, data-bs-toggle="collapse"kuyadingeka.

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

Evundlile

I-plugin yokugoqa iphinde isekele ukugoqa okuvundlile. Engeza .collapse-horizontalikilasi lesilungisi ukuze uguqule i- widthesikhundleni heightbese usetha u width-elementi yengane eseduze. Zizwe ukhululekile ukubhala i-Sass yakho yangokwezifiso, sebenzisa izitayela ezisemgqeni, noma usebenzise izinsiza zethu zobubanzi .

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

Okuhlosiwe okuningi

I-A <button>noma <a>ingabonisa futhi ifihle izinto eziningi ngokuzibhekisela ngesikhethi hrefnoma kusibaluli sayo data-bs-target. Amaningi <button>noma <a>angabonisa futhi afihle into uma ngamunye ebhekisela kuyo hrefnoma data-bs-targetngesibaluli sakhe

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

Ukufinyeleleka

Qiniseka ukuthi ungeza aria-expandedkusici sokulawula. Lesi sibaluli siveza ngokusobala isimo samanje se-elementi egoqekayo eboshelwe ekulawuleni izifundi zesikrini kanye nobuchwepheshe obusizayo obufanayo. Uma i-elementi egoqekayo ivalwa ngokuzenzakalelayo, isibaluli sesici sokulawula kufanele sibe nenani elithi aria-expanded="false". Uma usethe i-elementi egoqekayo ukuthi ivuleke ngokuzenzakalelayo usebenzisa showiklasi, setha aria-expanded="true"kusilawuli esikhundleni salokho. I-plugin izoguqula ngokuzenzakalelayo lesi sibaluli kusilawuli ngokusekelwe ekutheni i-elementi egoqekayo ivuliwe noma ivaliwe yini (nge-JavaScript, noma ngenxa yokuthi umsebenzisi ucuphe enye into yokulawula nayo eboshelwe kwinto efanayo egoqekayo). Uma i-elementi ye-HTML yento yokulawula ingeyona inkinobho (isb., i <a>noma <div>), isibalulirole="button"kufanele kwengezwe ku-elementi.

Uma i-elementi yakho yokulawula iqondise kwinto eyodwa egoqekayo - okungukuthi data-bs-targetisibaluli sikhomba idkusikhethi - kufanele wengeze aria-controlsisici sokulawula, esiqukethe idinto egoqekayo. Izifundi zesikrini zesimanje nobuchwepheshe bokusiza obufanayo busebenzisa lesi sici ukuze kunikeze abasebenzisi izinqamuleli ezengeziwe ukuze bazulazule ngokuqondile ku-elementi egoqekayo ngokwayo.

Qaphela ukuthi ukusebenzisa kwamanje kwe-Bootstrap akubandakanyi ukusebenzisana okuhlukahlukene kwekhibhodi ongakukhetha okuchazwe kuphethini ye-accordion Yomhlahlandlela Wemikhuba Yokugunyaza ye-ARIA - uzodinga ukuzifaka wena ngokwakho ne-JavaScript yangokwezifiso.

Sass

Okuguquguqukayo

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

Amakilasi

Goqa amakilasi enguquko angatholakala scss/_transitions.scssnjengoba lawa abelwe kuzo zonke izingxenye eziningi (ukugoqa kanye ne-accordion).

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

Ukusetshenziswa

I-plugin yokugoqa isebenzisa amakilasi ambalwa ukuphatha ukuphakamisa okusindayo:

• .collapseifihla okuqukethwe
• .collapse.showikhombisa okuqukethwe
• .collapsingyengezwa lapho inguquko iqala, futhi ikhishwe lapho iqeda

Lawa makilasi angatholakala ku _transitions.scss.

Ngezibaluli zedatha

Vele ungeze data-bs-toggle="collapse"futhi u-a entweni data-bs-targetukuze unikeze ngokuzenzakalelayo ukulawula kwe-elementi eyodwa noma eziningi ezigoqekayo. Isibaluli data-bs-targetsamukela isikhethi se-CSS ongafaka kuso ukugoqa. Qiniseka ukuthi ungeza ikilasi collapseku-elementi egoqekayo. Uma ungathanda ukuthi ivuleke ngokuzenzakalelayo, engeza iklasi elengeziwe show.

Ukuze ungeze ukuphathwa kweqembu okufana ne-accordion endaweni egoqekayo, engeza isibaluli sedatha data-bs-parent="#selector". Bheka ikhasi le- accordion ukuze uthole ulwazi olwengeziwe.

Nge-JavaScript

Nika amandla ngokwenza nge:

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

Izinketho

Njengoba izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript, ungakwazi ukwengeza igama lenketho kokuthi data-bs-, njengaku data-bs-animation="{value}". Qiniseka ukuthi ushintsha uhlobo lwekesi legama lenketho lisuka ku- “ camelCase ” liye ku- “ kebab-case ” lapho udlulisa izinketho ngezibaluli zedatha. Isibonelo, sebenzisa data-bs-custom-class="beautifier"esikhundleni se- data-bs-customClass="beautifier".

Kusukela ku-Bootstrap 5.2.0, zonke izingxenye zisekela isibaluli sedatha egodliwe esihlolwayodata-bs-config esingafaka ukucushwa kwengxenye elula njengochungechunge lwe-JSON. Uma into inezibaluli , inani lokugcina lizoba data-bs-config='{"delay":0, "title":123}'futhi izibaluli zedatha ezihlukene zizokhipha amanani anikezwe ngomhla ka- . Ngaphezu kwalokho, izibaluli zedatha ezikhona ziyakwazi ukubeka amanani e-JSON afana .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Izindlela

Yenza okuqukethwe kwakho kusebenze njengento egoqekayo. Yamukela izinketho ozikhethela object.

Ungakha isenzakalo sokuwa nomakhi, isibonelo:

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

Imicimbi

Ikilasi lokugoqa le-Bootstrap lidalula imicimbi embalwa ukuze ixhumeke ekusebenzeni kokugoqa.

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