Tonbe

Ki jan li fonksyone

Yo itilize plugin JavaScript efondre pou montre ak kache kontni. Bouton oswa lank yo itilize kòm deklannche ki trase nan eleman espesifik ou aktive. Efondreman yon eleman pral anime a heightsoti nan valè aktyèl li a 0. Bay fason CSS okipe animasyon, ou pa ka itilize paddingsou yon .collapseeleman. Olye de sa, sèvi ak klas la kòm yon eleman anbalaj endepandan.

Egzanp

Klike sou bouton ki anba yo pou montre ak kache yon lòt eleman atravè chanjman klas yo:

• .collapsekache kontni
• .collapsingyo aplike pandan tranzisyon yo
• .collapse.showmontre kontni

Anjeneral, nou rekòmande pou itilize yon bouton ki gen data-bs-targetatribi a. Pandan ke yo pa rekòmande nan yon pwen de vi semantik, ou ka tou itilize yon lyen ak hrefatribi a (ak yon role="button"). Nan de ka yo, data-bs-toggle="collapse"li nesesè.

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

Orizontal

Plugin efondreman an sipòte tou efondreman orizontal. Ajoute .collapse-horizontalklas modifikatè a nan tranzisyon an widtholye pou yo heightepi mete yon widthsou eleman imedya pitit la. Ezite ekri pwòp Sass koutim ou a, sèvi ak estil enline, oswa itilize sèvis piblik lajè nou yo .

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

Objektif miltip

Yon <button>oswa <a>ka montre ak kache plizyè eleman lè w refere yo ak yon seleksyon nan atribi hrefli yo. data-bs-targetPlizyè <button>oswa <a>ka montre ak kache yon eleman si yo chak fè referans li ak atribi yo hrefoswa yodata-bs-target

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

Aksesiblite

Asire ou ke ou ajoute aria-expandednan eleman kontwòl la. Atribi sa a eksplisitman transmèt eta aktyèl la nan eleman ki rabat la mare nan kontwòl la nan lektè ekran ak teknoloji asistans menm jan an. Si eleman plimyab la fèmen pa default, atribi sou eleman kontwòl la ta dwe gen yon valè aria-expanded="false". Si ou te mete eleman ki rabat la louvri pa default lè l sèvi avèk showklas la, mete aria-expanded="true"sou kontwòl la pito. Plugin a pral otomatikman baskile atribi sa a sou kontwòl la selon si wi ou non eleman ki plizyè a te louvri oswa fèmen (via JavaScript, oswa paske itilizatè a deklanche yon lòt eleman kontwòl tou mare nan menm eleman an pliye). Si eleman HTML eleman kontwòl la se pa yon bouton (egzanp, yon <a>oswa <div>), atribi arole="button"ta dwe ajoute nan eleman an.

Si eleman kontwòl ou a ap vize yon sèl eleman ki plizye - sa vle di data-bs-targetatribi a ap lonje dwèt sou yon idseleksyon - ou ta dwe ajoute aria-controlsatribi a nan eleman kontwòl la, ki gen ladan ideleman ki pliye a. Lektè ekran modèn yo ak teknoloji asistans ki sanble yo sèvi ak atribi sa a pou bay itilizatè yo rakoursi adisyonèl pou navige dirèkteman nan eleman ki rabat nan tèt li.

Remake byen ke aplikasyon Bootstrap aktyèl la pa kouvri divès kalite entèraksyon klavye opsyonèl ki dekri nan modèl akòdeyon Gid Pratik Otè ARIA a - w ap bezwen mete sa yo tèt ou ak JavaScript koutim.

Sass

Varyab

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

Klas

Yo ka jwenn klas tranzisyon yo nan efondreman scss/_transitions.scsspaske yo pataje plizyè eleman (effondreman ak akòdeyon).

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

Itilizasyon

Plugin efondreman an itilize kèk klas pou okipe leve lou:

• .collapsekache kontni an
• .collapse.showmontre kontni an
• .collapsingyo ajoute lè tranzisyon an kòmanse, epi li retire lè li fini

Ou ka jwenn klas sa yo nan _transitions.scss.

Via atribi done yo

Jis ajoute data-bs-toggle="collapse"ak yon data-bs-targetnan eleman nan otomatikman bay kontwòl youn oswa plis eleman plim. Atribi a data-bs-targetaksepte yon seleksyon CSS pou aplike efondreman an. Asire ou ke ou ajoute klas collapsela nan eleman ki rabat. Si ou ta renmen li louvri defo, ajoute klas adisyonèl la show.

Pou ajoute jesyon gwoup ki sanble ak akòdeyon nan yon zòn ki rabat, ajoute atribi done yo data-bs-parent="#selector". Ale nan paj akòdeyon an pou plis enfòmasyon.

Via JavaScript

Pèmèt manyèlman ak:

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

Opsyon

Kòm opsyon yo ka pase atravè atribi done oswa JavaScript, ou ka ajoute yon non opsyon nan data-bs-, tankou nan data-bs-animation="{value}". Asire w ke w chanje kalite ka non opsyon an soti nan " camelCase " a " kebab-case " lè w ap pase opsyon yo atravè atribi done yo. Pa egzanp, sèvi ak data-bs-custom-class="beautifier"olye de data-bs-customClass="beautifier".

Apati Bootstrap 5.2.0, tout konpozan sipòte yon eksperimantal atribi done rezève data-bs-configki ka loje konfigirasyon eleman senp kòm yon kòd JSON. Lè yon eleman gen data-bs-config='{"delay":0, "title":123}'ak data-bs-title="456"atribi, titlevalè final la pral 456ak atribi done separe yo pral pase sou valè yo bay sou data-bs-config. Anplis de sa, atribi done ki egziste deja yo kapab loje valè JSON tankou data-bs-delay='{"show":0,"hide":150}'.

Metòd

Aktive kontni ou kòm yon eleman plim. Aksepte yon opsyon opsyonèl object.

Ou ka kreye yon egzanp tonbe ak konstrukteur a, pou egzanp:

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

Evènman

Klas efondreman Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite efondreman.

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