Ku wa

Ndlela leyi swi tirhaka ha yona

Plugin ya JavaScript ya collapse yi tirhisiwa ku kombisa na ku fihla leswi nga endzeni. Tiboto kumbe ti- anchor ti tirhisiwa tanihi swihlohloteri leswi mepiweke eka swiaki swo karhi leswi u swi cinca-cincaka. Ku pfotlosa elemente swi ta endla leswaku ku hanya ku heightsuka eka ntikelo wa yona wa sweswi ku ya eka 0. Loko u nyikiwa ndlela leyi CSS yi khomaka swifaniso leswi hanyaka ha yona, a wu nge swi koti ku tirhisa paddingeka .collapseelemente. Ematshan’weni ya sweswo, tirhisa tlilasi tanihi xiaki xo phutsela lexi tiyimeleke.

Xikombiso

Click ti buttons leti nga laha hansi ku kombisa no fihla element yin’wana hi ku tirhisa ku cinca ka class:

• .collapseyi fihla leswi nga endzeni
• .collapsingyi tirhisiwa hi nkarhi wa ku cinca
• .collapse.showyi kombisa leswi nga endzeni

Hi ntolovelo, hi ringanyeta ku tirhisa buti leyi nga ni data-bs-targetxihlawulekisi. Hambileswi swi nga bumabumeriwiki hi ku ya hi langutelo ra semantiki, u nga ha tlhela u tirhisa xihlanganisi lexi nga ni hrefxihlawulekisi (na a role="button"). Eka swiyimo leswimbirhi, ku data-bs-toggle="collapse"laveka the.

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

Ololoka

Plugin ya ku wa yi tlhela yi seketela ku wa ka horizontal. Engetelani .collapse-horizontaltlilasi ya mucinci ku hundzula widthematshan’wini ya heightna ku veka a widtheka elemente ya n’wana wa le kusuhi. Titwele u ntshunxekile ku tsala Sass ya wena ya ntolovelo, tirhisa switayele swa le ndzeni ka layini, kumbe u tirhisa switirhisiwa swa hina swa ku anama .

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

Swikongomiso swo tala

A <button>kumbe <a>yi nga kombisa no fihla swiaki swo tala hi ku swi kombetela hi xihlawulekisi eka xihlawulekisi xa yona hrefkumbe data-bs-target. Multiple <button>kumbe <a>va nga kombisa no tumbeta elemente loko un’wana na un’wana a yi kombetela hi yona hrefkumbe data-bs-targetattribute

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

Ku fikelela

Tiyisisa leswaku u engetela aria-expandedeka xiaki xa vulawuri. Xihlawulekisi lexi xi hundzisela hi ku kongoma xiyimo xa sweswi xa xiaki lexi pfotlosaka lexi bohiweke eka vulawuri eka vahlayi va xikirini na thekinoloji yo pfuneta yo fana. Loko xiaki lexi nga pfaleriwaka xi pfariwile hi ku tiyimisela, xihlawulekisi eka xiaki xa vulawuri xi fanele ku va na ntikelo wa aria-expanded="false". Loko u vekile elemente leyi nga pfaleriwaka leswaku yi pfuleka hi ku tiyimisela hi ku tirhisa showtlilasi, veka aria-expanded="true"eka vulawuri ematshan’wini ya sweswo. Plugin yi ta cinca-cinca hi yoxe xihlawulekisi lexi eka vulawuri hi ku ya hi loko kumbe e-e xiaki lexi nga pfaleriwaka xi pfuriwile kumbe ku pfariwa (hi ku tirhisa JavaScript, kumbe hikuva mutirhisi u pfuxe xiaki xin’wana xa vulawuri lexi na xona xi bohiweke eka xiaki lexi fanaka lexi pfaleriwaka). Loko xiaki xa HTML xa xiaki xa vulawuri xi nga ri buti (xikombiso, an <a>kumbe <div>), xihlawulekisirole="button"yi fanele ku engeteriwa eka elemente.

Loko xiaki xa wena xa vulawuri xi kongomisa eka xiaki xin’we lexi nga pfaleriwaka – i.e. data-bs-targetxihlawulekisi xi kombetela eka idxihlawulekisi – u fanele ku engetela aria-controlsxihlawulekisi eka xiaki xa vulawuri, lexi nga na idxa xiaki lexi pfaleriwaka. Swihlaya swa xikirini swa manguva lawa na thekinoloji yo pfuneta leyi fanaka swi tirhisa xihlawulekisi lexi ku nyika vatirhisi swipfuxeto leswi engetelekeke swo famba hi ku kongoma eka xiaki lexi nga pfaleriwaka hi xoxe.

Xiya leswaku ku tirhisiwa ka sweswi ka Bootstrap a ku katsi ku tirhisana ka khibhodi yo hambana ya ku hlawula loku hlamuseriweke eka xivumbeko xa accordion xa ARIA Authoring Practices Guide - u ta lava ku katsa leswi hi wexe hi JavaScript ya ntolovelo.

Sass

Swilo leswi cinca-cincaka

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

Titlilasi

Titlilasi ta ku cinca ka ku wa ti nga kumeka eka scss/_transitions.scsstanihileswi leti ti avelaniwa ku tsemakanya swiphemu swo tala (ku wa na 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);
  }
}

Matirhiselo

Plugin ya ku wa yi tirhisa titlilasi ti nga ri tingani ku khoma ku tlakusa swilo swo tika:

• .collapseyi fihla leswi nga endzeni
• .collapse.showyi kombisa leswi nga endzeni
• .collapsingyi engeteriwa loko ku cinca ku sungula, naswona yi susiwa loko ku herile

Titlilasi leti ti nga kumeka eka _transitions.scss.

Hi ku tirhisa swihlawulekisi swa data

Ntsena engetela data-bs-toggle="collapse"na a data-bs-targeteka elemente ku avela hi ku tisungulela vulawuri bya elemente yin’we kumbe ku tlula leyi nga tshovekaka. Xihlawulekisi data-bs-targetxi amukela xihlawulekisi xa CSS ku tirhisa ku wisa eka xona. Tiyiseka leswaku u engetela tlilasi collapseeka xiaki lexi nga pfaleriwaka. Loko u lava leswaku yi pfuleka hi ku tiyimisela, engetela tlilasi leyi engetelekeke show.

Ku engetela vulawuri bya ntlawa lebyi fanaka ni bya accordion eka ndhawu leyi nga pfaleriwaka, engetela xihlawulekisi xa data data-bs-parent="#selector". Languta eka tluka ra accordion ku kuma vuxokoxoko byo tala.

Hi ku tirhisa JavaScript

Endla leswaku swi tirha hi voko hi:

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

Swihlawulekisi

Tanihi leswi swihlawulekisi swi nga hundziseriwaka hi ku tirhisa swihlawulekisi swa data kumbe JavaScript, u ​​nga engetela vito ra xihlawulekisi eka data-bs-, tanihi le ka data-bs-animation="{value}". Tiyisisa leswaku u cinca muxaka wa xiyimo xa vito ra xihlawulekisi ku suka eka “ camelCase ” ku ya eka “ kebab-case ” loko u hundzisa swihlawulekisi hi ku tirhisa swihlawulekisi swa data. Hi xikombiso, tirhisa data-bs-custom-class="beautifier"ematshan’weni ya data-bs-customClass="beautifier".

Ku sukela eka Bootstrap 5.2.0, swiphemu hinkwaswo swi seketela xihlawulekisi xa datha leyi hlayisiweke ya xikambelodata-bs-config lexi nga vekaka vukorhokeri byo olova bya xiphemu tanihi ntambhu ya JSON. Loko elemente yi ri data-bs-config='{"delay":0, "title":123}'na na data-bs-title="456"swihlawulekisi, titlentikelo wo hetelela wu ta va 456naswona swihlawulekisi swa datha leswi hambaneke swi ta tlula mimpimo leyi nyikiweke eka data-bs-config. Ku engetela kwalaho, swihlawulekisi swa datha leswi nga kona swi kota ku veka mimpimo ya JSON ku fana na data-bs-delay='{"show":0,"hide":150}'.

Maendlelo

Ku endla leswaku nhundzu ya wena yi tirha tanihi xiaki lexi nga pfaleriwaka. Ku amukela swihlawulekisi swa ku hlawula object.

U nga endla xikombiso xa ku pfaleka hi muaki, xikombiso:

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

Swiendlakalo

Tlilasi ya ku wa ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa ku wa.

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