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.

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-targetatributo. Kvankam ne rekomendite el semantika vidpunkto, vi ankaŭ povas uzi ligilon kun la hrefatributo (kaj role="button"). En ambaŭ kazoj, la data-toggle="collapse"estas postulata.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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 .widthmodifklason 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-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      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 JQuery-elektilo en ĝia hrefaŭ data-targetatributo. Multoblaj <button>aŭ <a>povas montri kaj kaŝi elementon se ili ĉiu referencas ĝin per sia hrefaŭ data-targetatributo

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

Ekzemplo de akordiono

Uzante la kartkomponenton , vi povas etendi la defaŭltan kolapsan konduton por krei akordionon. Por taŭge atingi la akordionon stilon, nepre uzu .accordionkiel envolvaĵon.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </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-targetatributo indikas idelektilon - 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 klavarajn interagojn priskribitajn en la akordiona ŝablono de ARIA Aŭtorado-Praktikoj - vi devos mem inkluzivi ĉi tiujn per kutima JavaScript.

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

Ĉi tiuj klasoj troviĝas en _transitions.scss.

Per datumaj atributoj

Nur aldonu data-toggle="collapse"kaj a data-targetal la elemento por aŭtomate asigni kontrolon de unu aŭ pluraj faldeblaj elementoj. La data-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-parent="#selector". Riferu al la demo por vidi ĉi tion en ago.

Per JavaScript

Ebligu permane per:

$('.collapse').collapse()

Opcioj

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

Metodoj

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('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.collapseaŭ hidden.bs.collapseevento).

.collapse('show')

Montras faldeblan elementon. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive montriĝis (te antaŭ ol la shown.bs.collapseevento okazas).

.collapse('hide')

Kaŝas faldeblan elementon. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive estis kaŝita (te antaŭ ol la hidden.bs.collapseevento okazas).

.collapse('dispose')

Detruas la kolapson de elemento.

Eventoj

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})