Strni

Kako deluje

Vtičnik JavaScript za strnitev se uporablja za prikaz in skrivanje vsebine. Gumbi ali sidra se uporabljajo kot sprožilci, ki so preslikani na določene elemente, ki jih preklapljate. Strnjenje elementa bo animiralo heightiz trenutne vrednosti v 0. Glede na to, kako CSS obravnava animacije, ne morete uporabiti paddingna .collapseelementu. Namesto tega uporabite razred kot neodvisen ovojni element.

Primer

Kliknite spodnje gumbe, da prikažete ali skrijete drug element prek sprememb razreda:

• .collapseskriva vsebino
• .collapsingse uporablja med prehodi
• .collapse.showprikazuje vsebino

Na splošno priporočamo uporabo gumba z data-bs-targetatributom. Čeprav ni priporočljivo s semantičnega vidika, lahko uporabite tudi povezavo z hrefatributom (in role="button"). V obeh primerih 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>

Vodoravno

Vtičnik za strnitev podpira tudi vodoravno strnitev. Dodajte .collapse-horizontalmodifikatorski razred za prehod widthnamesto heightin nastavite a widthna neposredni podrejeni element. Prosto napišite svoj Sass po meri, uporabite vgrajene sloge ali uporabite naše pripomočke za širino .

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

Več ciljev

A <button>ali <a>lahko prikaže in skrije več elementov tako, da se nanje sklicuje z izbirnikom v svojem atributu hrefali . data-bs-targetVeč <button>ali <a>lahko prikaže in skrije element, če se vsak sklicuje nanj s svojim hrefali 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>

Dostopnost

Bodite prepričani, da dodate aria-expandedv kontrolni element. Ta atribut izrecno posreduje trenutno stanje zložljivega elementa, povezanega s kontrolnikom, bralnikom zaslona in podobnim pomožnim tehnologijam. Če je zložljivi element privzeto zaprt, mora imeti atribut na nadzornem elementu vrednost aria-expanded="false". showČe ste z razredom nastavili, da je zložljivi element privzeto odprt, ga aria-expanded="true"namesto tega nastavite na kontrolniku. Vtičnik bo samodejno preklopil ta atribut na kontrolniku glede na to, ali je bil zložljivi element odprt ali zaprt (prek JavaScripta ali ker je uporabnik sprožil drug kontrolni element, prav tako povezan z istim zložljivim elementom). Če element HTML kontrolnika ni gumb (npr. <a>ali <div>), atributrole="button"je treba dodati elementu.

Če vaš kontrolni element cilja na en sam zložljiv element – ​​tj. data-bs-targetatribut kaže na idizbirnik – dodajte aria-controlsatribut v kontrolni element, ki vsebuje idelement zložljivega elementa. Sodobni bralniki zaslona in podobne podporne tehnologije uporabljajo ta atribut, da uporabnikom zagotovijo dodatne bližnjice za navigacijo neposredno do samega zložljivega elementa.

Upoštevajte, da trenutna izvedba Bootstrapa ne zajema različnih izbirnih interakcij s tipkovnico, opisanih v vzorcu harmonike ARIA Authoring Practices Guide - te boste morali vključiti sami z JavaScriptom po meri.

Sass

Spremenljivke

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

Razredi

Razrede prehoda strnitve lahko najdete v scss/_transitions.scss, saj si jih deli več komponent (zrušitev in 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);
  }
}

Uporaba

Vtičnik Collapse uporablja nekaj razredov za obvladovanje težkega dvigovanja:

• .collapseskriva vsebino
• .collapse.showprikazuje vsebino
• .collapsingse doda, ko se prehod začne, in odstrani, ko se konča

Te razrede lahko najdete v _transitions.scss.

Preko podatkovnih atributov

Samo dodajte data-bs-toggle="collapse"in data-bs-targetelementu, da samodejno dodelite nadzor nad enim ali več zložljivimi elementi. Atribut data-bs-targetsprejme izbirnik CSS za uporabo strnjenja. Ne pozabite dodati razreda collapsezložljivemu elementu. Če želite, da se privzeto odpre, dodajte dodatni razred show.

Če želite območju, ki ga je mogoče zložiti, dodati upravljanje skupine, podobno harmoniki, dodajte atribut podatkov data-bs-parent="#selector". Za več informacij si oglejte stran o harmoniki .

Prek JavaScripta

Omogoči ročno z:

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

Opcije

Ker je možnosti mogoče posredovati prek podatkovnih atributov ali JavaScripta, lahko dodate ime možnosti v data-bs-, kot v data-bs-animation="{value}". Prepričajte se, da ste spremenili vrsto malega črke imena možnosti iz " camelCase " v " kebab-case ", ko posredujete možnosti prek podatkovnih atributov. Na primer, uporabite data-bs-custom-class="beautifier"namesto data-bs-customClass="beautifier".

Od Bootstrap 5.2.0 naprej vse komponente podpirajo poskusni atribut rezerviranih podatkov, data-bs-configki lahko hrani preprosto konfiguracijo komponente kot niz JSON. Ko ima element atribute data-bs-config='{"delay":0, "title":123}'in data-bs-title="456", bo končna titlevrednost 456in ločeni atributi podatkov bodo preglasili vrednosti, podane na data-bs-config. Poleg tega lahko obstoječi atributi podatkov hranijo vrednosti JSON, kot je data-bs-delay='{"show":0,"hide":150}'.

Metode

Aktivira vašo vsebino kot zložljiv element. Sprejema neobvezne možnosti object.

Primerek strnjenja lahko ustvarite s konstruktorjem, na primer:

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

Dogodki

Bootstrapov razred kolapsa razkrije nekaj dogodkov za priključitev na funkcionalnost kolapsa.

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