Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
in English

Kolapso

Ŝaltu la videblecon de enhavo tra via projekto per kelkaj klasoj kaj niaj JavaScript-kromaĵoj.

Kiel ĝi funkcias

La kolapsa JavaScript-kromaĵo estas uzata por montri kaj kaŝi enhavon. Butonoj aŭ ankroj estas uzataj kiel ellasiloj, kiuj estas mapitaj al specifaj elementoj, kiujn vi ŝanĝas. Colapsante elementon vigligos la heightde ĝia nuna valoro al 0. Konsiderante kiel CSS pritraktas animaciojn, vi ne povas uzi paddingsur .collapseelemento. Anstataŭe, uzu la klason kiel sendependan envolvan elementon.

La animacia efiko de ĉi tiu komponanto dependas de la prefers-reduced-motionamaskomunikila demando. Vidu la sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .

Ekzemplo

Alklaku la subajn butonojn por montri kaj kaŝi alian elementon per klasŝanĝoj:

  • .collapsekaŝas enhavon
  • .collapsingestas aplikata dum transiroj
  • .collapse.showmontras enhavon

Ĝenerale, ni rekomendas uzi butonon kun la data-bs-targetatributo. Kvankam ne rekomendite el semantika vidpunkto, vi ankaŭ povas uzi ligilon kun la hrefatributo (kaj role="button"). En ambaŭ kazoj, la data-bs-toggle="collapse"estas postulata.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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>

Horizontala

La kolapsa kromaĵo ankaŭ subtenas horizontalan kolapson. Aldonu la .collapse-horizontalmodifklason por transiri la widthanstataŭ heightkaj agordi al widthla tuja infanelemento. Bonvolu skribi vian propran Sass, uzi enliniajn stilojn aŭ uzi niajn larĝajn utilecojn .

Bonvolu noti, ke dum la ĉi-suba ekzemplo havas min-heightaron por eviti troajn repentrojn en niaj dokumentoj, tio ne estas eksplicite postulata. Nur la widthsur la infana elemento estas bezonata.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<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>

Multoblaj celoj

A <button><a>povas montri kaj kaŝi plurajn elementojn referencante ilin per elektilo en ĝia hrefdata-bs-targetatributo. Multoblaj <button><a>povas montri kaj kaŝi elementon se ili ĉiu referencas ĝin per sia hrefdata-bs-targetatributo

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

Alirebleco

Nepre aldonu aria-expandedal la kontrolelemento. Ĉi tiu atributo eksplicite transdonas la nunan staton de la faldebla elemento ligita al la kontrolo al ekranlegantoj kaj similaj helpaj teknologioj. Se la faldebla elemento estas fermita defaŭlte, la atributo sur la kontrolelemento devus havi valoron de aria-expanded="false". Se vi agordis la faldeblan elementon por esti malfermita defaŭlte uzante la showklason, aria-expanded="true"anstataŭe agordu la kontrolon. La kromaĵo aŭtomate ŝaltos ĉi tiun atributon sur la kontrolo surbaze de ĉu aŭ ne la faldebla elemento estis malfermita aŭ fermita (per JavaScript, aŭ ĉar la uzanto ekigis alian kontrolelementon ankaŭ ligitan al la sama faldebla elemento). Se la HTML-elemento de la kontrolelemento ne estas butono (ekz., an <a><div>), la atributorole="button"devus esti aldonita al la elemento.

Se via kontrolelemento celas ununuran faldeblan elementon - te la data-bs-targetatributo montras al idelektilo - vi devus aldoni la aria-controlsatributon al la kontrolelemento, enhavanta la idde la faldebla elemento. Modernaj ekranlegiloj kaj similaj helpaj teknologioj uzas ĉi tiun atributon por provizi uzantojn per kromaj ŝparvojoj por navigi rekte al la faldebla elemento mem.

Notu, ke la nuna efektivigo de Bootstrap ne kovras la diversajn laŭvolajn klavarajn interagojn priskribitajn en la akordiona ŝablono WAI-ARIA Authoring Practices 1.1 - vi devos mem inkluzivi ĉi tiujn per kutima JavaScript.

Sass

Variabloj

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

Klasoj

Kolapsaj transirklasoj troveblas en scss/_transitions.scssĉar tiuj estas dividitaj tra pluraj komponentoj (kolapso kaj akordiono).

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

Uzado

La kolapsa kromaĵo uzas kelkajn klasojn por trakti la pezan ŝarĝon:

  • .collapsekaŝas la enhavon
  • .collapse.showmontras la enhavon
  • .collapsingestas aldonita kiam la transiro komenciĝas, kaj forigita kiam ĝi finiĝas

Tiuj ĉi klasoj troviĝas en _transitions.scss.

Per datumaj atributoj

Nur aldonu data-bs-toggle="collapse"kaj a data-bs-targetal la elemento por aŭtomate asigni kontrolon de unu aŭ pluraj faldeblaj elementoj. La data-bs-targetatributo akceptas CSS-elektilon al kiu apliki la kolapson. Nepre aldonu la klason collapseal la faldebla elemento. Se vi ŝatus, ke ĝi defaŭlte malfermu, aldonu la aldonan klason show.

Por aldoni akordion-similan grupadministradon al faldebla areo, aldonu la datuman atributon data-bs-parent="#selector". Vidu al la akordiona paĝo por pliaj informoj.

Per JavaScript

Ebligu permane per:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-bs-, kiel en data-bs-parent="".

Nomo Tajpu Defaŭlte Priskribo
parent elektilo | jQuery objekto | DOM-elemento false Se gepatro estas provizita, tiam ĉiuj faldeblaj elementoj sub la specifita gepatro estos fermitaj kiam ĉi tiu faldebla ero montriĝas. (simila al tradicia akordiona konduto - tio dependas de la cardklaso). La atributo devas esti agordita sur la cela faldebla areo.
toggle bulea true Ŝaltas la faldeblan elementon ĉe alvoko

Metodoj

Nesinkronaj metodoj kaj transiroj

Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .

Vidu nian JavaScript-dokumentaron por pliaj informoj .

Aktivigas vian enhavon kiel faldebla elemento. Akceptas laŭvolajn opciojn object.

Vi povas krei kolapsan ekzemplon per la konstrukciisto, ekzemple:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Metodo Priskribo
toggle Ŝaltas faldebla elemento al montrita aŭ kaŝita. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive estis montrita aŭ kaŝita (t.e. antaŭ ol okazas la shown.bs.collapsehidden.bs.collapseevento).
show Montras faldeblan elementon. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive montriĝis (ekz., antaŭ ol la shown.bs.collapseevento okazas).
hide Kaŝas faldeblan elementon. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive estis kaŝita (ekz., antaŭ ol la hidden.bs.collapseevento okazas).
dispose Detruas la kolapson de elemento. (Forigas konservitajn datumojn sur la DOM-elemento)
getInstance Senmova metodo, kiu ebligas al vi akiri la kolapsan ekzemplon asociitan al DOM-elemento, vi povas uzi ĝin tiel:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Senmova metodo kiu resendas kolapsan kazon asociitan al DOM-elemento aŭ kreas novan se ĝi ne estis pravigita. Vi povas uzi ĝin tiel:bootstrap.Collapse.getOrCreateInstance(element)

Eventoj

La kolapsoklaso de Bootstrap elmontras kelkajn eventojn por hoki en kolapfunkciecon.

Eventa tipo Priskribo
show.bs.collapse Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla metodo estas vokita.
shown.bs.collapse Ĉi tiu okazaĵo estas pafita kiam kolapelemento fariĝis videbla por la uzanto (atendos ke CSS-transiroj finiĝos).
hide.bs.collapse Ĉi tiu evento estas lanĉita tuj kiam la hidemetodo estas vokita.
hidden.bs.collapse Ĉi tiu okazaĵo estas pafita kiam kolapelemento estis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})