Goqa
Guqula ukubonakala kokuqukethwe kuyo yonke iphrojekthi yakho ngamakilasi ambalwa nama-plugin ethu e-JavaScript.
Isebenza kanjani
I-plugin ye-JavaScript yokugoqa isetshenziselwa ukubonisa nokufihla okuqukethwe. Izinkinobho noma amahange asetshenziswa njengezibangeli eziklanywe kuzinto ezithile ozishintshayo. Ukugoqa i-elementi kuzogqwayiza height
ukusuka kunani layo lamanje kuye ku- 0
. Uma kunikezwe ukuthi i-CSS iphatha kanjani ukugqwayiza, awukwazi ukusebenzisa padding
kusici .collapse
. Kunalokho, sebenzisa ikilasi njengento yokugoqa ezimele.
prefers-reduced-motion
embuzweni wemidiya. Bona ingxenye
yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .
Isibonelo
Chofoza izinkinobho ezingezansi ukuze ubonise futhi ufihle enye into ngezinguquko zekilasi:
.collapse
ifihla okuqukethwe.collapsing
isetshenziswa ngesikhathi soshintsho.collapse.show
ikhombisa okuqukethwe
Ngokuvamile, sincoma ukusebenzisa inkinobho data-bs-target
enesibaluli. Nakuba kunganconywa endaweni yokubuka ye-semantic, ungasebenzisa futhi isixhumanisi href
esinesibaluli (kanye ne- role="button"
). Kuzo zombili izimo, data-bs-toggle="collapse"
kuyadingeka.
<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>
Evundlile
I-plugin yokugoqa iphinde isekele ukugoqa okuvundlile. Engeza .collapse-horizontal
ikilasi lesilungisi ukuze uguqule i- width
esikhundleni height
bese usetha u width
-elementi yengane eseduze. Zizwe ukhululekile ukubhala i-Sass yakho yangokwezifiso, sebenzisa izitayela ezisemgqeni, noma usebenzise izinsiza zethu zobubanzi .
min-height
sinesethi yokugwema ukupenda kabusha okudlulele kumadokhumenti ethu, lokhu akudingekile ngokusobala.
Kudingeka width
i-elementi yengane kuphela.
<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>
Okuhlosiwe okuningi
I-A <button>
noma <a>
ingabonisa futhi ifihle izinto eziningi ngokuzibhekisela ngesikhethi href
noma kusibaluli sayo data-bs-target
. Amaningi <button>
noma <a>
angabonisa futhi afihle into uma ngamunye ebhekisela kuyo href
noma data-bs-target
ngesibaluli sakhe
<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>
Ukufinyeleleka
Qiniseka ukuthi ungeza aria-expanded
kusici sokulawula. Lesi sibaluli siveza ngokusobala isimo samanje se-elementi egoqekayo eboshelwe ekulawuleni izifundi zesikrini kanye nobuchwepheshe obusizayo obufanayo. Uma i-elementi egoqekayo ivalwa ngokuzenzakalelayo, isibaluli sesici sokulawula kufanele sibe nenani elithi aria-expanded="false"
. Uma usethe i-elementi egoqekayo ukuthi ivuleke ngokuzenzakalelayo usebenzisa show
iklasi, setha aria-expanded="true"
kusilawuli esikhundleni salokho. I-plugin izoguqula ngokuzenzakalelayo lesi sibaluli kusilawuli ngokusekelwe ekutheni i-elementi egoqekayo ivuliwe noma ivaliwe yini (nge-JavaScript, noma ngenxa yokuthi umsebenzisi ucuphe enye into yokulawula nayo eboshelwe kwinto efanayo egoqekayo). Uma i-elementi ye-HTML yento yokulawula ingeyona inkinobho (isb., i <a>
noma <div>
), isibalulirole="button"
kufanele kwengezwe ku-elementi.
Uma i-elementi yakho yokulawula iqondise kwinto eyodwa egoqekayo - okungukuthi data-bs-target
isibaluli sikhomba id
kusikhethi - kufanele wengeze aria-controls
isici sokulawula, esiqukethe id
into egoqekayo. Izifundi zesikrini zesimanje nobuchwepheshe bokusiza obufanayo busebenzisa lesi sici ukuze kunikeze abasebenzisi izinqamuleli ezengeziwe ukuze bazulazule ngokuqondile ku-elementi egoqekayo ngokwayo.
Qaphela ukuthi ukusebenzisa kwamanje kwe-Bootstrap akubandakanyi ukusebenzisana okuhlukahlukene kwekhibhodi kokuzithandela okuchazwe ku- WAI-ARIA Imikhuba Yokugunyaza 1.1 iphethini ye-accordion - uzodinga ukuzifaka wena ngokwakho ne-JavaScript yangokwezifiso.
Sass
Okuguquguqukayo
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Amakilasi
Goqa amakilasi enguquko angatholakala scss/_transitions.scss
njengoba lawa abelwe kuzo zonke izingxenye eziningi (ukugoqa kanye ne-accordion).
.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);
}
}
Ukusetshenziswa
I-plugin yokugoqa isebenzisa amakilasi ambalwa ukuphatha ukuphakamisa okusindayo:
.collapse
ifihla okuqukethwe.collapse.show
ikhombisa okuqukethwe.collapsing
yengezwa lapho inguquko iqala, futhi ikhishwe lapho iqeda
Lawa makilasi angatholakala ku _transitions.scss
.
Ngezibaluli zedatha
Vele ungeze data-bs-toggle="collapse"
futhi u-a entweni data-bs-target
ukuze unikeze ngokuzenzakalelayo ukulawula kwe-elementi eyodwa noma eziningi ezigoqekayo. Isibaluli data-bs-target
samukela isikhethi se-CSS ongafaka kuso ukugoqa. Qiniseka ukuthi ungeza ikilasi collapse
ku-elementi egoqekayo. Uma ungathanda ukuthi ivuleke ngokuzenzakalelayo, engeza iklasi elengeziwe show
.
Ukuze ungeze ukuphathwa kweqembu okufana ne-accordion endaweni egoqekayo, engeza isibaluli sedatha data-bs-parent="#selector"
. Bheka ikhasi le- accordion ukuze uthole ulwazi olwengeziwe.
Nge-JavaScript
Nika amandla ngokwenza nge:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Izinketho
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-bs-
, njengaku data-bs-parent=""
.
Igama | Uhlobo | Okuzenzakalelayo | Incazelo |
---|---|---|---|
parent |
isikhethi | into ye-jQuery | Isici se-DOM | false |
Uma umzali enikeziwe, khona-ke zonke izici ezigoqekayo ngaphansi komzali othile zizovalwa lapho le nto egoqekayo iboniswa. (okufana nokuziphatha kwe-accordion yendabuko - lokhu kuncike card ekilasini). Isibaluli kufanele simiswe endaweni egoqekayo eqondiwe. |
toggle |
boolean | true |
Iguqula into egoqekayo ekunxuseni |
Izindlela
Izindlela ze-Asynchronous kanye noshintsho
Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .
Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .
Yenza okuqukethwe kwakho kusebenze njengento egoqekayo. Yamukela izinketho ozikhethela object
.
Ungakha isenzakalo sokuwa nomakhi, isibonelo:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Indlela | Incazelo |
---|---|
toggle |
Iguqula into egoqekayo ukuze iboniswe noma ifihlwe. Ibuyela kofonayo ngaphambi kokuba into egoqekayo iboniswe noma ifihlwe (okungukuthi ngaphambi kokuba kwenzeke shown.bs.collapse noma hidden.bs.collapse isigameko). |
show |
Ibonisa into egoqekayo. Ibuyela kofonayo ngaphambi kokuba into egoqekayo iboniswe (isb, ngaphambi kokuthi shown.bs.collapse kwenzeke umcimbi). |
hide |
Ifihla into egoqekayo. Ibuyela kofonayo ngaphambi kokuba into egoqekayo ifihleke (isb, ngaphambi kokuthi hidden.bs.collapse kwenzeke umcimbi). |
dispose |
Icekela phansi ukuwa kwento. (Isusa idatha egciniwe kusici se-DOM) |
getInstance |
Indlela emile ekuvumela ukuthi uthole isenzakalo sokuwa esihlotshaniswa nento ye-DOM, ungayisebenzisa kanje:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Indlela emile ebuyisela isenzakalo sokugoqa esihlobene nento ye-DOM noma idale entsha uma kwenzeka ingaqaliswanga. Ungayisebenzisa kanje:bootstrap.Collapse.getOrCreateInstance(element) |
Imicimbi
Ikilasi lokugoqa le-Bootstrap lidalula imicimbi embalwa ukuze ixhumeke ekusebenzeni kokugoqa.
Uhlobo lomcimbi | Incazelo |
---|---|
show.bs.collapse |
Lo mcimbi uvutha ngokushesha lapho show indlela yesibonelo ibizwa. |
shown.bs.collapse |
Lo mcimbi uxoshwa lapho isici sokugoqa senziwe sabonakala kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele). |
hide.bs.collapse |
Lo mcimbi uxoshwa ngokushesha lapho hide indlela isibiziwe. |
hidden.bs.collapse |
Lo mcimbi uxoshwa lapho isici sokugoqa sifihliwe kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})