Nahugno

Giunsa kini paglihok

Ang collapse JavaScript plugin gigamit sa pagpakita ug pagtago sa sulod. Ang mga butones o mga angkla gigamit isip mga trigger nga gimapa sa piho nga mga elemento nga imong gi-toggle. Ang pag-collapse sa usa ka elemento magpa-animate sa heightgikan sa kasamtangang bili niini ngadto sa 0. Gihatag kung giunsa pagdumala sa CSS ang mga animation, dili nimo magamit paddingsa usa ka .collapseelemento. Hinuon, gamita ang klase isip usa ka independente nga elemento sa pagputos.

Pananglitan

I-klik ang mga buton sa ubos aron ipakita ug itago ang laing elemento pinaagi sa mga kausaban sa klase:

• .collapsenagtago sa sulod
• .collapsinggigamit sa panahon sa transisyon
• .collapse.shownagpakita sa sulod

Kasagaran, girekomenda namon ang paggamit sa usa ka buton nga adunay data-bs-targethiyas. Bisan kung dili girekomenda gikan sa usa ka semantiko nga punto sa pagtan-aw, mahimo ka usab mogamit usa ka link nga adunay hrefhiyas (ug usa ka role="button"). Sa duha ka mga kaso, ang data-bs-toggle="collapse"gikinahanglan.

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

Pahigda

Ang collapse plugin nagsuporta usab sa horizontal collapsing. Idugang ang .collapse-horizontalklase sa modifier aron mabalhin ang widthimbes heightug itakda ang usa widthsa diha-diha nga elemento sa bata. Mobati nga gawasnon sa pagsulat sa imong kaugalingon nga kostumbre nga Sass, gamita ang inline nga mga istilo, o gamita ang among lapad nga mga gamit .

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

Daghang mga target

Ang usa <button>o <a>mahimong magpakita ug magtago sa daghang mga elemento pinaagi sa pag-refer niini sa usa ka tigpili sa hrefo data-bs-targethiyas niini. Multiple <button>o <a>mahimong magpakita ug magtago sa usa ka elemento kung ang matag usa kanila maghisgot niini sa ilang 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

Siguroha nga idugang aria-expandedsa kontrol nga elemento. Kini nga hiyas tin-aw nga nagpahayag sa kasamtangan nga kahimtang sa nahugno nga elemento nga nahigot sa kontrol sa mga magbabasa sa screen ug susama nga mga teknolohiya sa pagtabang. Kung ang ma-collapsible nga elemento sirado pinaagi sa default, ang attribute sa control element kinahanglan adunay kantidad nga aria-expanded="false". Kung imong gitakda nga ang collapsible nga elemento mahimong bukas pinaagi sa default gamit ang showklase, ibutang aria-expanded="true"sa kontrol. Awtomatiko nga i-toggle sa plugin ang kini nga attribute sa kontrol base sa kung giablihan o gisirado ang collapsible nga elemento (pinaagi sa JavaScript, o tungod kay ang user nag-trigger og laing control element nga nahigot usab sa samang collapsible nga elemento). Kung ang elemento sa kontrol nga HTML dili usa ka buton (pananglitan, usa <a>o <div>), ang hiyasrole="button"kinahanglan idugang sa elemento.

Kung ang imong kontrol nga elemento nagpunting sa usa ka nahugno nga elemento - ie ang data-bs-targetattribute nagpunting sa usa ka idselector - kinahanglan nimong idugang ang aria-controlsattribute sa control element, nga adunay sulod idsa collapsible nga elemento. Ang mga moderno nga screen reader ug susamang assistive nga mga teknolohiya naggamit niini nga attribute aron mahatagan ang mga user og dugang nga mga shortcut aron direkta nga maka-navigate sa collapsible nga elemento mismo.

Timan-i nga ang kasamtangang pagpatuman sa Bootstrap wala maglakip sa lain-laing opsyonal nga mga interaksyon sa keyboard nga gihulagway sa ARIA Authoring Practices Guide accordion pattern - kinahanglan nimo nga iapil kini sa imong kaugalingon sa custom JavaScript.

Sass

Mga variable

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

Mga klase

Ang mga collapse transition classes makit-an tungod scss/_transitions.scsskay kini gipaambit sa daghang mga sangkap (collapse ug 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

Ang collapse plugin naggamit sa pipila ka mga klase sa pagdumala sa bug-at nga pag-alsa:

• .collapsenagtago sa sulod
• .collapse.shownagpakita sa sulod
• .collapsingidugang kung magsugod na ang transisyon, ug tangtangon kung mahuman na

Kini nga mga klase makita sa _transitions.scss.

Pinaagi sa data attributes

Idugang lang data-bs-toggle="collapse"ug a data-bs-targetsa elemento aron awtomatik nga ma-assign ang kontrol sa usa o daghan pa nga nahugno nga mga elemento. Ang data-bs-targethiyas modawat ug CSS selector aron magamit ang pagkahugno. Siguroha nga idugang ang klase collapsesa collapsible nga elemento. Kung gusto nimo nga kini nga default bukas, idugang ang dugang nga klase show.

Aron idugang ang sama sa akordyon nga pagdumala sa grupo ngadto sa usa ka ma-collapsible nga lugar, idugang ang data attribute data-bs-parent="#selector". Tan-awa ang panid sa akordyon alang sa dugang nga impormasyon.

Pinaagi sa JavaScript

I-enable ang mano-mano gamit ang:

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

Mga kapilian

Ingon nga ang mga kapilian mahimong ipasa pinaagi sa data attributes o JavaScript, mahimo nimong idugang ang ngalan sa opsyon sa data-bs-, sama sa data-bs-animation="{value}". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa " CamelCase " ngadto sa " kebab-case " kung ipasa ang mga kapilian pinaagi sa mga attribute sa datos. Pananglitan, gamita data-bs-custom-class="beautifier"imbes nga data-bs-customClass="beautifier".

Ingon sa Bootstrap 5.2.0, ang tanan nga mga sangkap nagsuporta sa usa ka eksperimento nga gireserba nga kinaiya sa datos data-bs-confignga mahimo’g ibutang ang yano nga pag-configure sa sangkap ingon usa ka string sa JSON. Kung ang usa ka elemento adunay data-bs-config='{"delay":0, "title":123}'ug data-bs-title="456"mga hiyas, ang katapusan titlenga kantidad mao ang 456ug ang bulag nga mga hiyas sa datos mag-override sa mga kantidad nga gihatag sa data-bs-config. Dugang pa, ang naglungtad nga mga hiyas sa datos makahimo sa pagbutang sa mga kantidad sa JSON sama sa data-bs-delay='{"show":0,"hide":150}'.

Pamaagi

Gi-aktibo ang imong sulud ingon usa ka ma-collapsible nga elemento. Modawat ug opsyonal nga mga kapilian object.

Makahimo ka og usa ka pananglitan sa pagkahugno sa constructor, pananglitan:

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

Mga panghitabo

Ang klase sa pagkahugno sa Bootstrap nagpadayag sa pipila ka mga panghitabo alang sa pag-hook sa pag-andar sa pagkahugno.

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