Colaps

Cum functioneaza

Pluginul JavaScript restrâns este folosit pentru a afișa și a ascunde conținutul. Butoanele sau ancorele sunt folosite ca declanșatori care sunt mapate la anumite elemente pe care le comutați. Restrângerea unui element va anima de heightla valoarea sa curentă la 0. Având în vedere modul în care CSS gestionează animațiile, nu puteți utiliza paddingpe un .collapseelement. În schimb, utilizați clasa ca element independent de împachetare.

Exemplu

Faceți clic pe butoanele de mai jos pentru a afișa și a ascunde un alt element prin modificări de clasă:

• .collapseascunde conținutul
• .collapsingse aplică în timpul tranzițiilor
• .collapse.showafișează conținut

În general, vă recomandăm să folosiți un buton cu data-bs-targetatributul. Deși nu este recomandat din punct de vedere semantic, puteți utiliza și o legătură cu hrefatributul (și un role="button"). În ambele cazuri, data-bs-toggle="collapse"este necesar.

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

Pluginul de restrângere acceptă și restrângerea orizontală. Adăugați .collapse-horizontalclasa modificatoare pentru a face tranziția în widthloc de heightși setați a widthpe elementul secundar imediat. Simțiți-vă liber să scrieți propriul dvs. Sass personalizat, să folosiți stiluri inline sau să folosiți utilitatile noastre de lățime .

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

Ținte multiple

A <button>sau <a>poate afișa și ascunde mai multe elemente, referindu-le cu un selector în atributul hrefsau . data-bs-targetMultiple <button>sau <a>pot afișa și ascunde un element dacă fiecare face referire la el cu atributul hrefsaudata-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>

Accesibilitate

Asigurați-vă că adăugați aria-expandedla elementul de control. Acest atribut transmite în mod explicit starea curentă a elementului pliabil legat de control către cititoarele de ecran și tehnologiile de asistență similare. Dacă elementul pliabil este închis implicit, atributul de pe elementul de control ar trebui să aibă valoarea aria-expanded="false". Dacă ați setat elementul pliabil să fie deschis în mod implicit folosind showclasa, setați aria-expanded="true"în schimb controlul. Pluginul va comuta automat acest atribut pe control în funcție de faptul dacă elementul pliabil a fost sau nu deschis sau închis (prin JavaScript sau pentru că utilizatorul a declanșat un alt element de control legat de același element pliabil). Dacă elementul HTML al elementului de control nu este un buton (de exemplu, un <a>sau <div>), atributulrole="button"ar trebui adăugat la element.

Dacă elementul dvs. de control vizează un singur element pliabil - adică data-bs-targetatributul indică către un idselector - ar trebui să adăugați aria-controlsatributul la elementul de control, care conține idelementul pliabil. Cititoarele de ecran moderne și tehnologiile de asistență similare folosesc acest atribut pentru a oferi utilizatorilor comenzi rapide suplimentare pentru a naviga direct la elementul pliabil în sine.

Rețineți că implementarea actuală a Bootstrap nu acoperă diferitele interacțiuni opționale de la tastatură descrise în modelul de acordeon al Ghidului de practici de autor ARIA - va trebui să le includeți singur cu JavaScript personalizat.

Sass

Variabile

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

Clase

Clasele de tranziție colaps pot fi găsite în scss/_transitions.scss, deoarece acestea sunt partajate între mai multe componente (restrângere și acordeon).

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

Utilizare

Pluginul de colaps folosește câteva clase pentru a face față sarcinilor grele:

• .collapseascunde conținutul
• .collapse.showarata continutul
• .collapsingeste adăugată când începe tranziția și eliminată când se termină

Aceste clase pot fi găsite în _transitions.scss.

Prin atribute de date

Doar adăugați data-bs-toggle="collapse"și data-bs-targeta elementului pentru a atribui automat controlul unuia sau mai multor elemente pliabile. Atributul data-bs-targetacceptă un selector CSS pentru a aplica restrângerea. Asigurați-vă că adăugați clasa collapsela elementul pliabil. Dacă doriți să se deschidă implicit, adăugați clasa suplimentară show.

Pentru a adăuga un management de grup asemănător unui acordeon într-o zonă pliabilă, adăugați atributul de date data-bs-parent="#selector". Consultați pagina acordeonului pentru mai multe informații.

Prin JavaScript

Activați manual cu:

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

Opțiuni

Deoarece opțiunile pot fi transmise prin atribute de date sau JavaScript, puteți adăuga un nume de opțiune la data-bs-, ca în data-bs-animation="{value}". Asigurați-vă că schimbați tipul de caz al numelui opțiunii din „ camelCase ” în „ kebab-case ” atunci când treceți opțiunile prin atributele de date. De exemplu, utilizați data-bs-custom-class="beautifier"în loc de data-bs-customClass="beautifier".

Începând cu Bootstrap 5.2.0, toate componentele acceptă un atribut de date rezervat experimentaldata-bs-config care poate găzdui configurarea simplă a componentelor ca șir JSON. Când un element are data-bs-config='{"delay":0, "title":123}'și data-bs-title="456"atribute, valoarea finală titleva fi 456și atributele de date separate vor înlocui valorile date pe data-bs-config. În plus, atributele de date existente pot găzdui valori JSON precum data-bs-delay='{"show":0,"hide":150}'.

Metode

Activează conținutul dvs. ca element pliabil. Acceptă opțiuni opționale object.

Puteți crea o instanță de colaps cu constructorul, de exemplu:

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

Evenimente

Clasa de colaps a lui Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea de colaps.

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