Kolaps

Kako radi

JavaScript dodatak za sažimanje koristi se za prikazivanje i sakrivanje sadržaja. Dugmad ili sidra se koriste kao okidači koji su mapirani na određene elemente koje prebacujete. Sažimanje elementa će animirati heightiz njegove trenutne vrijednosti u 0. S obzirom na to kako CSS rukuje animacijama, ne možete koristiti paddingna .collapseelementu. Umjesto toga, koristite klasu kao nezavisni element omota.

Primjer

Kliknite na dugmad ispod da prikažete i sakrijete drugi element putem promjena klase:

• .collapsesakriva sadržaj
• .collapsingprimjenjuje se tokom prijelaza
• .collapse.showprikazuje sadržaj

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

<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 kolaps također podržava horizontalno sažimanje. Dodajte .collapse-horizontalmodifikatorsku klasu da pređete widthumjesto heighti postavite a widthna neposredni podređeni element. Slobodno napišite vlastiti prilagođeni Sass, koristite inline stilove ili koristite naše uslužne programe širine .

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

A <button>ili <a>može prikazati i sakriti više elemenata upućivanjem na njih pomoću selektora u svom hrefili data-bs-targetatributu. Višestruki <button>ili <a>mogu prikazati i sakriti element ako svaki od njih referencira sa 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-expandedkontrolni element. Ovaj atribut eksplicitno prenosi trenutno stanje sklopivog elementa povezanog s kontrolom na čitače ekrana i slične pomoćne tehnologije. Ako je sklopivi element zatvoren prema zadanim postavkama, atribut na kontrolnom elementu trebao bi imati vrijednost aria-expanded="false". Ako ste postavili da sklopivi element bude otvoren prema zadanim postavkama pomoću showklase, aria-expanded="true"umjesto toga postavite na kontroli. Dodatak će automatski uključiti ovaj atribut na kontroli na osnovu toga da li je sklopivi element otvoren ili zatvoren (putem JavaScripta, ili zato što je korisnik pokrenuo drugi kontrolni element koji je također vezan za isti sklopivi element). Ako HTML element kontrolnog elementa nije dugme (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 kontrolnom elementu, koji sadrži idsklopivi element. Moderni čitači ekrana i slične pomoćne tehnologije koriste ovaj atribut kako bi korisnicima pružile dodatne prečice za navigaciju direktno do samog sklopivog elementa.

Imajte na umu da Bootstrap-ova trenutna implementacija ne pokriva različite opcione interakcije sa tastaturom opisane u ARIA Authoring Practices Guide obrascu harmonike - moraćete da ih sami uključite u prilagođeni JavaScript.

Sass

Varijable

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

Casovi

Prelazne klase kolapsa se mogu naći u scss/_transitions.scssjer se dijele na više komponenti (kolaps 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);
  }
}

Upotreba

Dodatak za kolaps koristi nekoliko klasa za rukovanje teškim podizanjem:

• .collapsesakriva sadržaj
• .collapse.showprikazuje sadržaj
• .collapsingse dodaje kada prijelaz počne, a uklanja se kada se završi

Ovi časovi se mogu naći u _transitions.scss.

Preko atributa podataka

Samo dodajte data-bs-toggle="collapse"i a data-bs-targetelementu da automatski dodijelite kontrolu nad jednim ili više sklopivih elemenata. Atribut data-bs-targetprihvaća CSS selektor za primjenu kolapsa na. Obavezno dodajte klasu collapsesklopivom elementu. Ako želite da se zadano otvori, dodajte dodatnu klasu show.

Da biste dodali upravljanje grupama nalik harmonici u sklopivu oblast, dodajte atribut podataka data-bs-parent="#selector". Za više informacija pogledajte stranicu o harmonici .

Preko JavaScripta

Omogućite ručno pomoću:

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

Opcije

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 tip slučaja naziva opcije iz “ camelCase ” u “ kebab-case ” prilikom prosljeđivanja opcija 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 smjestiti jednostavnu konfiguraciju komponente kao JSON string. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456i odvojeni atributi podataka će nadjačati vrijednosti date 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. Prihvata opcione opcije object.

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

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

Događaji

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

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