ambruk

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-bs-targetatribut. Nalika ora dianjurake saka sudut pandang semantik, sampeyan uga bisa nggunakake link karo hrefatribut (lan role="button"). Ing kasus loro, data-bs-toggle="collapse"iku dibutuhake.

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

Horisontal

Plugin ambruk uga ndhukung ambruk horisontal. Tambah .collapse-horizontalkelas 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-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>

Multiple target

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

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

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-bs-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 opsional sing diterangake ing pola akordion WAI-ARIA Authoring Practices 1.1 - sampeyan kudu nyakup iki dhewe karo JavaScript khusus.

Sass

Variabel

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

kelas

Kelas transisi ambruk bisa ditemokake scss/_transitions.scssamarga dibagi ing pirang-pirang komponen (ambruk lan akordion).

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

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-bs-toggle="collapse"lan data-bs-targetmenyang unsur kanggo otomatis nemtokake kontrol siji utawa luwih unsur collapsible. Atribut data-bs-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-bs-parent="#selector". Deleng kaca akordion kanggo informasi luwih lengkap.

Liwat JavaScript

Aktifake kanthi manual kanthi:

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

Pilihan

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

Metode

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

Sampeyan bisa nggawe conto ambruk karo konstruktor, contone:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

Acara

Kelas ambruk Bootstrap nyedhiyakake sawetara acara kanggo nyambungake fungsi ambruk.

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})