Pagbagsak

Paano ito gumagana

Ang collapse JavaScript plugin ay ginagamit upang ipakita at itago ang nilalaman. Ginagamit ang mga button o anchor bilang mga trigger na nakamapa sa mga partikular na elemento na iyong i-toggle. Ang pag-collapse ng isang elemento ay magpapasigla sa heightmula sa kasalukuyang halaga nito hanggang sa 0. Dahil sa kung paano pinangangasiwaan ng CSS ang mga animation, hindi mo magagamit paddingsa isang .collapseelemento. Sa halip, gamitin ang klase bilang isang independiyenteng elemento ng pambalot.

Halimbawa

I-click ang mga button sa ibaba upang ipakita at itago ang isa pang elemento sa pamamagitan ng mga pagbabago sa klase:

• .collapsenagtatago ng nilalaman
• .collapsingay inilapat sa panahon ng mga transition
• .collapse.shownagpapakita ng nilalaman

Sa pangkalahatan, inirerekomenda namin ang paggamit ng isang button na may data-bs-targetkatangian. Bagama't hindi inirerekomenda mula sa isang semantic na pananaw, maaari ka ring gumamit ng isang link na may hrefkatangian (at isang role="button"). Sa parehong mga kaso, ang data-bs-toggle="collapse"ay kinakailangan.

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

Pahalang

Sinusuportahan din ng collapse plugin ang pahalang na pagbagsak. Idagdag ang .collapse-horizontalklase ng modifier upang i-transition ang sa widthhalip na heightat itakda ang isang widthsa agarang elemento ng bata. Huwag mag-atubiling magsulat ng sarili mong custom na Sass, gumamit ng mga inline na istilo, o gamitin ang aming mga width utilities .

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

Maramihang mga target

Ang <button>o <a>ay maaaring magpakita at magtago ng maraming elemento sa pamamagitan ng pagtukoy sa kanila ng isang tagapili sa hrefo data-bs-targetkatangian nito. Marami <button>o <a>maaaring magpakita at magtago ng isang elemento kung ire-reference nila ito sa kanilang hrefo 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>

Accessibility

Tiyaking idagdag aria-expandedsa control element. Ang katangiang ito ay tahasang naghahatid ng kasalukuyang estado ng nati-collaps na elemento na nakatali sa kontrol sa mga screen reader at mga katulad na pantulong na teknolohiya. Kung ang collapsible element ay sarado bilang default, ang attribute sa control element ay dapat may value na aria-expanded="false". Kung itinakda mo ang nako-collaps na elemento na bukas bilang default gamit ang showklase, itakda aria-expanded="true"na lang sa control. Awtomatikong i-toggle ng plugin ang attribute na ito sa control batay sa kung nabuksan o isinara ang collapsible na elemento (sa pamamagitan ng JavaScript, o dahil nag-trigger ang user ng isa pang control element na nakatali din sa parehong collapsible na elemento). Kung ang elementong HTML ng control element ay hindi isang button (hal., an <a>or <div>), ang attributerole="button"dapat idagdag sa elemento.

Kung ang iyong control element ay nagta-target sa isang solong collapsible na elemento – ibig sabihin, ang data-bs-targetattribute ay tumuturo sa isang idselector – dapat mong idagdag ang aria-controlsattribute sa control element, na naglalaman ng idng collapsible na elemento. Ginagamit ng mga makabagong screen reader at katulad na mga teknolohiyang pantulong ang katangiang ito upang bigyan ang mga user ng karagdagang mga shortcut upang direktang mag-navigate sa mismong nako-collaps na elemento.

Tandaan na ang kasalukuyang pagpapatupad ng Bootstrap ay hindi sumasaklaw sa iba't ibang opsyonal na pakikipag-ugnayan sa keyboard na inilarawan sa ARIA Authoring Practices Guide accordion pattern - kakailanganin mong isama ang mga ito sa iyong sarili sa custom na JavaScript.

Sass

Mga variable

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

Mga klase

Matatagpuan ang mga collapse transition classes scss/_transitions.scssdahil ang mga ito ay ibinabahagi sa maraming bahagi (collapse at 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);
  }
}

Paggamit

Gumagamit ang collapse plugin ng ilang klase upang mahawakan ang mabigat na pag-aangat:

• .collapsenagtatago ng nilalaman
• .collapse.shownagpapakita ng nilalaman
• .collapsingay idinaragdag kapag nagsimula ang paglipat, at inalis kapag natapos na ito

Ang mga klase na ito ay matatagpuan sa _transitions.scss.

Sa pamamagitan ng mga katangian ng data

Idagdag lang data-bs-toggle="collapse"at a data-bs-targetsa elemento para awtomatikong magtalaga ng kontrol sa isa o higit pang mga collapsible na elemento. Tumatanggap ang data-bs-targetattribute ng isang CSS selector para ilapat ang pag-collapse. Tiyaking idagdag ang klase collapsesa collapsible na elemento. Kung gusto mo itong maging default na bukas, idagdag ang karagdagang klase show.

Upang magdagdag ng mala-accordion na pamamahala ng pangkat sa isang collapsible na lugar, idagdag ang attribute ng data data-bs-parent="#selector". Sumangguni sa pahina ng accordion para sa karagdagang impormasyon.

Sa pamamagitan ng JavaScript

Paganahin nang manu-mano gamit ang:

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

Mga pagpipilian

Dahil maaaring maipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript, maaari kang magdagdag ng pangalan ng opsyon sa data-bs-, tulad ng sa data-bs-animation="{value}". Siguraduhing baguhin ang uri ng case ng pangalan ng opsyon mula sa " camelCase " sa " kebab-case " kapag ipinapasa ang mga opsyon sa pamamagitan ng mga katangian ng data. Halimbawa, gamitin data-bs-custom-class="beautifier"sa halip na data-bs-customClass="beautifier".

Mula sa Bootstrap 5.2.0, sinusuportahan ng lahat ng mga bahagi ang isang pang- eksperimentong nakalaan na katangian ng data data-bs-configna maaaring maglagay ng simpleng configuration ng bahagi bilang isang string ng JSON. Kapag ang isang elemento ay may data-bs-config='{"delay":0, "title":123}'at data-bs-title="456"mga katangian, ang huling titlehalaga ay magiging 456at ang hiwalay na mga katangian ng data ay mag-o-override sa mga halagang ibinigay sa data-bs-config. Bilang karagdagan, ang mga kasalukuyang katangian ng data ay nakakapaglagay ng mga halaga ng JSON tulad ng data-bs-delay='{"show":0,"hide":150}'.

Paraan

Ina-activate ang iyong content bilang isang collapsible na elemento. Tumatanggap ng opsyonal na opsyon object.

Maaari kang lumikha ng isang halimbawa ng pagbagsak sa tagabuo, halimbawa:

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

Events

Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.

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