Összeomlás

Néhány osztállyal és JavaScript beépülő moduljainkkal átkapcsolhatja a tartalom láthatóságát a projektben.

Hogyan működik

Az összecsukható JavaScript beépülő modul a tartalom megjelenítésére és elrejtésére szolgál. A gombok vagy horgonyok triggerekként használatosak, amelyek a váltott elemekhez vannak leképezve. Egy elem összecsukásakor az heightaktuális értékről a -ra animálja 0. Tekintettel arra, hogy a CSS hogyan kezeli az animációkat, nem használható paddingelemeken .collapse. Ehelyett használja az osztályt független burkolóelemként.

Példa

Kattintson az alábbi gombokra egy másik elem megjelenítéséhez és elrejtéséhez osztálymódosításokon keresztül:

• .collapsetartalmat rejt
• .collapsingátmenetek során alkalmazzák
• .collapse.showtartalmat mutat

data-targetÁltalában az attribútummal rendelkező gomb használatát javasoljuk . Bár szemantikai szempontból nem ajánlott, az hrefattribútummal (és egy role="button") hivatkozást is használhat. Mindkét esetben data-toggle="collapse"kötelező.

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

Vízszintes

Az összecsukás plugin támogatja a vízszintes összecsukást is. Adja hozzá a .widthmódosító osztályt a widthhelyett, heightés állítsa widthbe a közvetlen gyermekelemet. Nyugodtan írhat saját egyéni Sass-t, használhat belső stílusokat, vagy használja szélességű segédprogramjainkat .

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

Több célpont

A <button>vagy <a>több elemet is megjeleníthet és elrejthet, ha hivatkozik rájuk egy JQuery-választóval az hrefattribútumában data-target. Több <button>vagy <a>megjeleníthet és elrejthet egy elemet, ha mindegyik a hrefvagy data-targetattribútummal hivatkozik rá

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

Példa harmonika

A kártyakomponens használatával kiterjesztheti az alapértelmezett összecsukási viselkedést harmonika létrehozásához. A harmonika stílus megfelelő eléréséhez feltétlenül használja .accordionburkolóanyagként.

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

Megközelíthetőség

Feltétlenül adja hozzá aria-expandeda vezérlőelemet. Ez az attribútum kifejezetten közvetíti a vezérlőhöz kapcsolódó összecsukható elem aktuális állapotát a képernyőolvasóknak és a hasonló kisegítő technológiáknak. Ha az összecsukható elem alapértelmezés szerint be van zárva, akkor a vezérlőelem attribútumának értékűnek kell lennie aria-expanded="false". Ha az összecsukható elemet alapértelmezés szerint nyitottnak állította be az showosztály használatával, aria-expanded="true"akkor inkább a vezérlőn állítsa be. A beépülő modul automatikusan átkapcsolja ezt az attribútumot a vezérlőn attól függően, hogy az összecsukható elemet megnyitották-e vagy bezárták-e (JavaScripten keresztül, vagy azért, mert a felhasználó egy másik, ugyanahhoz az összecsukható elemhez kötött vezérlőelemet váltott ki). Ha a vezérlőelem HTML-eleme nem gomb (pl. egy <a>vagy <div>), akkor az attribútumrole="button"hozzá kell adni az elemhez.

Ha a vezérlőelem egyetlen összecsukható elemet céloz meg – azaz az data-targetattribútum egy idszelektorra mutat –, akkor az attribútumot hozzá kell adni az összecsukható elemet aria-controlstartalmazó vezérlőelemhez . idA modern képernyőolvasók és a hasonló kisegítő technológiák ezt az attribútumot használják fel, hogy további parancsikonokat biztosítsanak a felhasználóknak, amelyekkel közvetlenül az összecsukható elemhez navigálhatnak.

Ne feledje, hogy a Bootstrap jelenlegi megvalósítása nem fedi le az ARIA Authoring Practices Guide harmonikamintában leírt különféle billentyűzet-interakciókat – ezeket Önnek kell beillesztenie az egyéni JavaScriptbe.

Használat

A collapse plugin néhány osztályt használ a nehéz emelés kezelésére:

• .collapseelrejti a tartalmat
• .collapse.showmutatja a tartalmat
• .collapsinghozzáadódik az átmenet megkezdésekor, és eltávolítja, amikor befejeződik

Ezek az osztályok itt találhatók _transitions.scss.

Adatattribútumokon keresztül

Csak adja hozzá az elemet data-toggle="collapse"és egy data-targetelemet, hogy automatikusan hozzárendelje egy vagy több összecsukható elem vezérlését. Az data-targetattribútum elfogad egy CSS-választót az összecsukás alkalmazásához. Feltétlenül adja hozzá az osztályt collapseaz összecsukható elemhez. Ha azt szeretné, hogy alapértelmezetten megnyíljon, adja hozzá a további osztályt show.

Ha harmonikaszerű csoportkezelést szeretne hozzáadni egy összecsukható területhez, adja hozzá a data attribútumot data-parent="#selector". Tekintse meg a bemutatót, hogy megtekinthesse ezt működés közben.

JavaScripten keresztül

Manuális engedélyezés a következőkkel:

$('.collapse').collapse()

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-parent="".

Mód

.collapse(options)

A tartalmat összecsukható elemként aktiválja. Elfogad egy opcionális opciót object.

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

.collapse('toggle')

Az összecsukható elemet megjelenített vagy rejtett állapotba kapcsolja. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen megjelenne vagy elrejtődne (azaz mielőtt a shown.bs.collapsevagy hidden.bs.collapseesemény bekövetkezne).

.collapse('show')

Összecsukható elemet jelenít meg. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen megjelenne (azaz az shown.bs.collapseesemény bekövetkezte előtt).

.collapse('hide')

Elrejti az összecsukható elemet. Visszatér a hívóhoz, mielőtt az összecsukható elem ténylegesen el lett volna rejtve (azaz az hidden.bs.collapseesemény bekövetkezte előtt).

.collapse('dispose')

Elpusztítja egy elem összeomlását.

Események

A Bootstrap összecsukási osztálya felfed néhány eseményt az összecsukási funkcióhoz való kapcsolódáshoz.

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