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 height
saka nilai saiki kanggo 0
. Given carane CSS nangani animasi, sampeyan ora bisa nggunakake padding
ing .collapse
unsur. Nanging, nggunakake kelas minangka unsur bungkus sawijining.
prefers-reduced-motion
pitakon media. Deleng
bagean gerakan suda saka dokumentasi aksesibilitas kita .
Tuladha
Klik tombol ing ngisor iki kanggo nuduhake lan ndhelikake unsur liyane liwat owah-owahan kelas:
.collapse
ndhelikake isi.collapsing
ditrapake sajrone transisi.collapse.show
nuduhake isi
Umumé, disaranake nggunakake tombol kanthi data-bs-target
atribut. Nalika ora dianjurake saka sudut pandang semantik, sampeyan uga bisa nggunakake link karo href
atribut (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-horizontal
kelas modifier kanggo transisi width
tinimbang height
lan nyetel width
ing unsur anak langsung. Bebas bae kanggo nulis Sass adat dhewe, nggunakake gaya inline, utawa nggunakake utilitas jembaré kita .
min-height
set kanggo ngindhari repaint sing berlebihan ing dokumen kita, iki ora dibutuhake kanthi jelas.
Mung ing width
unsur anak dibutuhake.
<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 href
utawa . data-bs-target
Multiple <button>
utawa <a>
bisa nuduhake lan ndhelikake unsur yen saben referensi karo atribut href
utawadata-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-expanded
menyang 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 show
kelas, 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-target
atribut kasebut ngarah menyang id
pamilih - sampeyan kudu nambah aria-controls
atribut menyang unsur kontrol, ngemot id
unsur 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.scss
amarga 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:
.collapse
ndhelikake isi.collapse.show
nuduhake isi.collapsing
ditambahake 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-target
menyang unsur kanggo otomatis nemtokake kontrol siji utawa luwih unsur collapsible. Atribut data-bs-target
nampa pamilih CSS kanggo aplikasi ambruk kanggo. Dadi manawa kanggo nambah kelas collapse
menyang 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=""
.
jeneng | Jinis | Default | Katrangan |
---|---|---|---|
parent |
pamilih | obyek jQuery | unsur DOM | false |
Yen wong tuwa diwenehake, kabeh unsur sing bisa dilipat ing sangisore wong tuwa sing ditemtokake bakal ditutup nalika item sing bisa dilipat iki ditampilake. (padha karo prilaku akordion tradisional - iki gumantung ing card kelas). Atribut kudu disetel ing target area sing bisa dilipat. |
toggle |
boolean | true |
Ngowahi unsur sing bisa dilipat ing panyuwunan |
Metode
Cara lan transisi asinkron
Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .
Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .
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
})
Metode | Katrangan |
---|---|
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.collapse utawa hidden.bs.collapse acara dumadi). |
show |
Nuduhake unsur collapsible. Bali menyang panelpon sadurunge unsur collapsible wis bener ditampilake (contone, sadurunge shown.bs.collapse acara dumadi). |
hide |
Ndhelikake unsur collapsible. Bali menyang panelpon sadurunge unsur collapsible bener-bener didhelikake (contone, sadurunge hidden.bs.collapse acara kasebut kedadeyan). |
dispose |
Ngancurake ambruk unsur. (Mbusak data sing disimpen ing unsur DOM) |
getInstance |
Cara statis sing ngidini sampeyan entuk conto ambruk sing ana gandhengane karo unsur DOM, sampeyan bisa nggunakake kaya iki:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Cara statis sing ngasilake conto ambruk sing ana gandhengane karo unsur DOM utawa nggawe sing anyar yen ora diwiwiti. Sampeyan bisa nggunakake kaya iki:bootstrap.Collapse.getOrCreateInstance(element) |
Acara
Kelas ambruk Bootstrap nyedhiyakake sawetara acara kanggo nyambungake fungsi ambruk.
Jenis acara | Katrangan |
---|---|
show.bs.collapse |
Acara iki langsung murub nalika show metode conto diarani. |
shown.bs.collapse |
Acara iki dipecat nalika unsur ambruk wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung). |
hide.bs.collapse |
Acara iki langsung dipecat nalika hide metode kasebut diarani. |
hidden.bs.collapse |
Acara iki dipecat nalika unsur ambruk wis didhelikake saka pangguna (bakal ngenteni transisi CSS rampung). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})