ambruk

Ganti visibilitas konten ing proyek sampeyan kanthi sawetara kelas lan plugin JavaScript.

Cara kerjane

Plugin JavaScript ambruk digunakake kanggo nuduhake lan ndhelikake konten. Tombol utawa jangkar digunakake minangka pemicu sing dipetakan menyang unsur tartamtu sing sampeyan ganti. Ambruk unsur bakal nguripake heightsaka nilai saiki kanggo 0. Given carane CSS nangani animasi, sampeyan ora bisa nggunakake paddinging .collapseunsur. Nanging, nggunakake kelas minangka unsur bungkus sawijining.

Tuladha

Klik tombol ing ngisor iki kanggo nuduhake lan ndhelikake unsur liyane liwat owah-owahan kelas:

• .collapsendhelikake isi
• .collapsingditrapake sajrone transisi
• .collapse.shownuduhake isi

Umumé, disaranake nggunakake tombol kanthi data-targetatribut. Nalika ora dianjurake saka sudut pandang semantik, sampeyan uga bisa nggunakake link karo hrefatribut (lan role="button"). Ing kasus loro, data-toggle="collapse"iku dibutuhake.

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

Horisontal

Plugin ambruk uga ndhukung ambruk horisontal. Tambah .widthkelas modifier kanggo transisi widthtinimbang heightlan nyetel widthing unsur anak langsung. Bebas bae kanggo nulis Sass adat dhewe, nggunakake gaya inline, utawa nggunakake utilitas jembaré kita .

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

Multiple target

A <button>utawa <a>bisa nuduhake lan ndhelikake sawetara unsur kanthi ngrujuk karo pamilih JQuery ing atribut hrefutawa . data-targetMultiple <button>utawa <a>bisa nuduhake lan ndhelikake unsur yen saben referensi karo atribut hrefutawadata-target

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

Tuladha akordion

Nggunakake komponen kertu , sampeyan bisa ngluwihi prilaku ambruk standar kanggo nggawe akordion. Kanggo entuk gaya akordion kanthi bener, mesthine digunakake .accordionminangka pambungkus.

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

Aksesibilitas

Dadi manawa kanggo nambah aria-expandedmenyang unsur kontrol. Atribut iki kanthi jelas nuduhake kahanan saiki saka unsur sing bisa digulung sing disambungake menyang kontrol kanggo maca layar lan teknologi pitulung sing padha. Yen unsur collapsible ditutup kanthi standar, atribut ing unsur kontrol kudu duwe nilai aria-expanded="false". Yen sampeyan wis nyetel unsur collapsible mbukak minangka standar nggunakake showkelas, nyetel aria-expanded="true"ing kontrol tinimbang. Plugin bakal kanthi otomatis ngalih atribut iki ing kontrol adhedhasar apa unsur collapsible wis dibukak utawa ditutup (liwat JavaScript, utawa amarga pangguna micu unsur kontrol liyane uga disambungake menyang unsur collapsible padha). Yen unsur HTML unsur kontrol dudu tombol (contone, <a>utawa <div>), atribut kasebutrole="button"kudu ditambahake menyang unsur.

Yen unsur kontrol sampeyan nargetake unsur sing bisa dilipat - yaiku data-targetatribut kasebut ngarah menyang idpamilih - sampeyan kudu nambah aria-controlsatribut menyang unsur kontrol, ngemot idunsur sing bisa dilipat. Pembaca layar modern lan teknologi bantu sing padha nggunakake atribut iki kanggo nyedhiyakake trabasan tambahan kanggo pangguna kanggo navigasi langsung menyang unsur sing bisa dilipat.

Elinga yen implementasine Bootstrap saiki ora nyakup macem-macem interaksi keyboard sing diterangake ing pola akordeon ARIA Authoring Practices Guide - sampeyan kudu nyakup iki dhewe karo JavaScript khusus.

Panggunaan

Plugin ambruk nggunakake sawetara kelas kanggo nangani ngangkat abot:

• .collapsendhelikake isi
• .collapse.shownuduhake isi
• .collapsingditambahake nalika transisi diwiwiti, lan dibusak nalika rampung

Kelas kasebut bisa ditemokake ing _transitions.scss.

Liwat atribut data

Mung nambah data-toggle="collapse"lan data-targetmenyang unsur kanggo otomatis nemtokake kontrol siji utawa luwih unsur collapsible. Atribut data-targetnampa pamilih CSS kanggo aplikasi ambruk kanggo. Dadi manawa kanggo nambah kelas collapsemenyang unsur collapsible. Yen sampeyan pengin mbukak standar, tambahake kelas tambahan show.

Kanggo nambah manajemen grup kaya akordion menyang area sing bisa dilipat, tambahake atribut data data-parent="#selector". Deleng demo kanggo ndeleng iki ing tumindak.

Liwat JavaScript

Aktifake kanthi manual kanthi:

$('.collapse').collapse()

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-parent="".

Metode

.collapse(options)

Ngaktifake konten sampeyan minangka unsur sing bisa dilipat. Nampa opsi opsional object.

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

.collapse('toggle')

Ngalih unsur sing bisa dilipat dadi ditampilake utawa didhelikake. Bali menyang panelpon sadurunge unsur collapsible wis bener ditampilake utawa didhelikake (yaiku sadurunge shown.bs.collapseutawa hidden.bs.collapseacara dumadi).

.collapse('show')

Nuduhake unsur collapsible. Bali menyang panelpon sadurunge unsur collapsible wis bener wis ditampilake (ie sadurunge shown.bs.collapseacara kedaden).

.collapse('hide')

Ndhelikake unsur collapsible. Bali menyang panelpon sadurunge unsur collapsible wis bener didhelikake (yaiku sadurunge hidden.bs.collapseacara kedaden).

.collapse('dispose')

Ngancurake ambruk unsur.

Acara

Kelas ambruk Bootstrap nyedhiyakake sawetara acara kanggo nyambungake fungsi ambruk.

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