Kolaps

Kako radi

Sažeti JavaScript dodatak koristi se za prikazivanje i sakrivanje sadržaja. Gumbi ili sidra koriste se kao okidači koji se preslikavaju na određene elemente koje mijenjate. Sažimanje elementa će animirati heightiz njegove trenutne vrijednosti u 0. S obzirom na to kako CSS obrađuje animacije, ne možete koristiti paddingna .collapseelementu. Umjesto toga, koristite klasu kao neovisni element za omatanje.

Primjer

Pritisnite donje gumbe za prikaz ili skrivanje drugog elementa putem promjena klase:

• .collapseskriva sadržaj
• .collapsingprimjenjuje se tijekom prijelaza
• .collapse.showprikazuje sadržaj

Općenito, preporučujemo korištenje gumba s data-bs-targetatributom. Iako se ne preporučuje sa semantičke točke gledišta, također možete koristiti vezu s hrefatributom (i role="button"). U oba slučaja data-bs-toggle="collapse"potrebno je.

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

Horizontalno

Dodatak za sažimanje također podržava horizontalno sažimanje. Dodajte .collapse-horizontalklasu modifikatora za prijelaz widthumjesto heighti postavite widthna neposredni podređeni element. Slobodno napišite vlastiti prilagođeni Sass, koristite ugrađene stilove ili koristite naše pomoćne programe za širinu .

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

Više ciljeva

A <button>ili <a>može prikazati i sakriti više elemenata upućivanjem na njih selektorom u svom hrefili data-bs-targetatributu. Višestruki <button>ili <a>mogu prikazati i sakriti element ako svaki od njih upućuje na njega svojim hrefili data-bs-targetatributom

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

Pristupačnost

Obavezno dodajte aria-expandedu kontrolni element. Ovaj atribut eksplicitno prenosi trenutačno stanje sklopivog elementa povezanog s kontrolom čitačima zaslona i sličnim pomoćnim tehnologijama. Ako je sklopivi element zatvoren prema zadanim postavkama, atribut na kontrolnom elementu trebao bi imati vrijednost aria-expanded="false". Ako ste sklopivi element postavili da bude otvoren prema zadanim postavkama pomoću showklase, aria-expanded="true"umjesto toga postavite na kontrolu. Dodatak će automatski prebaciti ovaj atribut na kontrolu na temelju toga je li sklopivi element otvoren ili zatvoren (preko JavaScripta ili zato što je korisnik pokrenuo drugi kontrolni element također povezan s istim sklopivim elementom). Ako HTML element kontrolnog elementa nije gumb (npr. <a>ili <div>), atributrole="button"treba dodati elementu.

Ako vaš kontrolni element cilja na jedan sklopivi element – ​​tj. data-bs-targetatribut pokazuje na idselektor – trebali biste dodati aria-controlsatribut u kontrolni element koji sadrži idelement sklopivog elementa. Moderni čitači zaslona i slične pomoćne tehnologije koriste ovaj atribut kako bi korisnicima pružili dodatne prečace za izravnu navigaciju do samog sklopivog elementa.

Imajte na umu da Bootstrapova trenutna implementacija ne pokriva razne izborne interakcije tipkovnice opisane u uzorku harmonike ARIA Authoring Practices Guide - morat ćete ih sami uključiti s prilagođenim JavaScriptom.

Sass

Varijable

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

Nastava

Klase prijelaza sažimanja mogu se pronaći u scss/_transitions.scssbudući da se dijele na više komponenti (sažimanje i harmonika).

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

Korištenje

Dodatak za kolapsiranje koristi nekoliko klasa za rukovanje teškim dizanjem:

• .collapseskriva sadržaj
• .collapse.showprikazuje sadržaj
• .collapsingdodaje se kada prijelaz započne, a uklanja se kada završi

Ove se klase mogu pronaći u _transitions.scss.

Preko atributa podataka

Samo dodajte data-bs-toggle="collapse"i data-bs-targetelementu da biste automatski dodijelili kontrolu nad jednim ili više sklopivih elemenata. Atribut data-bs-targetprihvaća CSS selektor na koji se primjenjuje sažimanje. Obavezno dodajte klasu collapsesklopivom elementu. Ako želite da se prema zadanim postavkama otvori, dodajte dodatnu klasu show.

Za dodavanje grupnog upravljanja poput harmonike u sklopivi prostor dodajte atribut podataka data-bs-parent="#selector". Više informacija potražite na stranici o harmonici .

Preko JavaScripta

Omogućite ručno pomoću:

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

Mogućnosti

Kako se opcije mogu proslijediti putem atributa podataka ili JavaScripta, možete dodati naziv opcije u data-bs-, kao u data-bs-animation="{value}". Obavezno promijenite vrstu velikih i malih slova naziva opcije iz “ camelCase ” u “ kebab-case ” kada prosljeđujete opcije putem atributa podataka. Na primjer, koristite data-bs-custom-class="beautifier"umjesto data-bs-customClass="beautifier".

Od Bootstrapa 5.2.0, sve komponente podržavaju eksperimentalni atribut rezerviranih podataka data-bs-configkoji može sadržavati jednostavnu konfiguraciju komponente kao JSON niz. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456, a zasebni atributi podataka nadjačat će vrijednosti dane na data-bs-config. Osim toga, postojeći atributi podataka mogu sadržavati JSON vrijednosti poput data-bs-delay='{"show":0,"hide":150}'.

Metode

Aktivira vaš sadržaj kao sklopivi element. Prihvaća izborne opcije object.

Možete stvoriti instancu kolapsa pomoću konstruktora, na primjer:

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

Događaji

Bootstrapova kolaps klasa izlaže nekoliko događaja za spajanje na kolaps funkcionalnost.

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