kolaps

Ako to funguje

Zásuvný modul JavaScript sa používa na zobrazenie a skrytie obsahu. Tlačidlá alebo kotvy sa používajú ako spúšťače, ktoré sú namapované na konkrétne prvky, ktoré prepínate. Zbalením prvku sa prvok animuje heightz jeho aktuálnej hodnoty na 0. Vzhľadom na to, ako CSS spracováva animácie, nemôžete použiť paddingna .collapseprvok. Namiesto toho použite triedu ako nezávislý obalový prvok.

Príklad

Kliknutím na tlačidlá nižšie zobrazíte a skryjete ďalší prvok prostredníctvom zmien triedy:

• .collapseskrýva obsah
• .collapsingsa aplikuje pri prechodoch
• .collapse.showzobrazuje obsah

Vo všeobecnosti odporúčame použiť tlačidlo s data-bs-targetatribútom. Aj keď sa to zo sémantického hľadiska neodporúča, môžete použiť aj prepojenie s hrefatribútom (a role="button"). V oboch prípadoch data-bs-toggle="collapse"sa vyžaduje.

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

Horizontálne

Zásuvný modul pre zbalenie podporuje aj horizontálne zbalenie. Pridajte .collapse-horizontaltriedu modifikátora na prechod triedy widtha heightnastavte a widthna bezprostredný podriadený prvok. Neváhajte a napíšte svoj vlastný Sass, použite vložené štýly alebo použite naše nástroje pre šírku .

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

Viaceré ciele

A <button>alebo <a>môže zobraziť a skryť viacero prvkov tak, že na ne odkazuje selektorom vo svojom atribúte hrefalebo . data-bs-targetViacnásobné <button>alebo <a>môžu zobraziť a skryť prvok, ak naň každý odkazuje svojím atribútom hrefalebo data-bs-targetatribútom

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

Prístupnosť

Nezabudnite pridať aria-expandeddo ovládacieho prvku. Tento atribút explicitne vyjadruje aktuálny stav skladacieho prvku spojeného s ovládacím prvkom čítačkám obrazovky a podobným asistenčným technológiám. Ak je skladací prvok predvolene zatvorený, atribút ovládacieho prvku by mal mať hodnotu aria-expanded="false". Ak ste nastavili, aby bol skladací prvok predvolene otvorený pomocou showtriedy, nastavte aria-expanded="true"ho na ovládacom prvku. Doplnok automaticky prepne tento atribút na ovládacom prvku na základe toho, či bol alebo nebol skladací prvok otvorený alebo zatvorený (cez JavaScript, alebo pretože používateľ spustil iný ovládací prvok, ktorý je tiež viazaný na rovnaký skladací prvok). Ak prvkom HTML ovládacieho prvku nie je tlačidlo (napr. <a>alebo <div>), atribútrole="button"treba pridať k prvku.

Ak je váš ovládací prvok zacielený na jeden skladací prvok – tj data-bs-targetatribút ukazuje na idselektor – mali by ste pridať aria-controlsatribút do ovládacieho prvku, ktorý obsahuje idskladací prvok. Moderné čítačky obrazovky a podobné asistenčné technológie využívajú tento atribút na to, aby používateľom poskytli ďalšie skratky na prechod priamo na samotný skladací prvok.

Všimnite si, že súčasná implementácia Bootstrapu nepokrýva rôzne voliteľné klávesové interakcie opísané v akordeónovom vzore ARIA Authoring Practices Guide – budete ich musieť zahrnúť sami s vlastným JavaScriptom.

Sass

Premenné

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

triedy

Prechodové triedy kolapsu možno nájsť v scss/_transitions.scss, pretože sú zdieľané medzi viacerými komponentmi (kolaps a akordeón).

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

Použitie

Zásuvný modul používa niekoľko tried na zvládnutie ťažkého zdvíhania:

• .collapseskrýva obsah
• .collapse.showzobrazuje obsah
• .collapsingsa pridá pri spustení prechodu a odstráni sa po jeho dokončení

Tieto triedy nájdete v _transitions.scss.

Cez dátové atribúty

Stačí pridať data-bs-toggle="collapse"a data-bs-targetk prvku a automaticky priradiť ovládanie jedného alebo viacerých skladacích prvkov. Atribút data-bs-targetakceptuje selektor CSS, na ktorý sa má použiť zbalenie. Nezabudnite pridať triedu collapsedo skladacieho prvku. Ak chcete, aby bola predvolene otvorená, pridajte ďalšiu triedu show.

Ak chcete do skladacej oblasti pridať správu skupiny podobnú akordeónu, pridajte atribút data data-bs-parent="#selector". Viac informácií nájdete na stránke akordeón .

Cez JavaScript

Povoliť manuálne pomocou:

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

možnosti

Keďže možnosti možno odovzdať prostredníctvom atribútov údajov alebo jazyka JavaScript, môžete pridať názov možnosti k data-bs-, ako v data-bs-animation="{value}". Pri odovzdávaní možností cez atribúty údajov nezabudnite zmeniť typ prípadu názvu možnosti z „ camelCase “ na „ kebab-case “. Napríklad použite data-bs-custom-class="beautifier"namiesto data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všetky komponenty podporujú experimentálny atribút rezervovaných údajov data-bs-config, ktorý môže obsahovať jednoduchú konfiguráciu komponentu ako reťazec JSON. Ak má prvok atribúty data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné atribúty údajov prepíšu hodnoty uvedené na data-bs-config. Existujúce dátové atribúty môžu navyše obsahovať hodnoty JSON ako data-bs-delay='{"show":0,"hide":150}'.

Metódy

Aktivuje váš obsah ako skladací prvok. Prijíma voliteľné možnosti object.

Inštanciu kolapsu môžete vytvoriť pomocou konštruktora, napríklad:

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

Diania

Trieda zbalenia Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkcii zbalenia.

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