Kolapso

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.

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.

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

<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ŭ <a>povas montri kaj kaŝi plurajn elementojn referencante ilin per elektilo en ĝia hrefaŭ data-bs-targetatributo. Multoblaj <button>aŭ <a>povas montri kaj kaŝi elementon se ili ĉiu referencas ĝin per sia hrefaŭ data-bs-targetatributo

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

Rimarku, ke la nuna efektivigo de Bootstrap ne kovras la diversajn laŭvolajn klavarajn interagojn priskribitajn en la ARIA Aŭtorado-Praktika Gvidisto akordionŝablono - vi devos mem inkluzivi ĉi tiujn kun 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:

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

Opcioj

Ĉar opcioj povas esti pasigitaj per datumaj atributoj aŭ JavaScript, vi povas almeti opcionomon al data-bs-, kiel en data-bs-animation="{value}". Nepre ŝanĝu la kazon de la opcionomo de " camelCase " al " kebab-case " kiam vi pasas la opciojn per datumaj atributoj. Ekzemple, uzu data-bs-custom-class="beautifier"anstataŭ data-bs-customClass="beautifier".

Ekde Bootstrap 5.2.0, ĉiuj komponantoj subtenas eksperimentan rezervitan datuman atributon data-bs-config, kiu povas enhavi simplan komponan agordon kiel JSON-ĉeno. Kiam elemento havas data-bs-config='{"delay":0, "title":123}'kaj data-bs-title="456"atributojn, la fina titlevaloro estos 456kaj la apartaj datumaj atributoj anstataŭigos valorojn donitajn sur data-bs-config. Krome, ekzistantaj datumaj atributoj povas enhavi JSON-valorojn kiel data-bs-delay='{"show":0,"hide":150}'.

Metodoj

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

Vi povas krei kolapsan ekzemplon per la konstrukciisto, ekzemple:

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

Eventoj

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

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