Kugwa
Sinthani kuwoneka kwa zomwe zili mu projekiti yanu ndi makalasi angapo ndi mapulagini athu a JavaScript.
Momwe zimagwirira ntchito
Pulogalamu yowonjezera ya JavaScript imagwiritsidwa ntchito kusonyeza ndi kubisa zomwe zili. Mabatani kapena anangula amagwiritsidwa ntchito ngati zoyambitsa zomwe zimajambulidwa kuzinthu zinazake zomwe mumasintha. Kugwetsa chinthu kumapangitsa kuti chinthucho height
chichoke pamtengo wake wapano mpaka 0
. Poganizira momwe CSS imagwirira ntchito makanema ojambula, simungagwiritse ntchito padding
pa .collapse
chinthu. M'malo mwake, gwiritsani ntchito kalasi ngati chinthu chodzikulunga chodziyimira payokha.
prefers-reduced-motion
funso la media. Onani gawo
lochepetsedwa la zolemba zathu zofikira .
Chitsanzo
Dinani mabatani omwe ali pansipa kuti muwonetse ndikubisa chinthu china kudzera mukusintha kwamakalasi:
.collapse
amabisa zomwe zili.collapsing
imagwiritsidwa ntchito panthawi ya kusintha.collapse.show
zikuwonetsa zomwe zili
Nthawi zambiri, timalimbikitsa kugwiritsa ntchito batani lokhala ndi mawonekedwe data-bs-target
. Ngakhale osavomerezeka kuchokera kumalingaliro a semantic, mutha kugwiritsanso ntchito ulalo wokhala ndi href
malingaliro (ndi a role="button"
). Muzochitika zonsezi, data-bs-toggle="collapse"
ndikofunikira.
<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>
Zolinga zingapo
A <button>
kapena <a>
atha kuwonetsa ndikubisa zinthu zingapo pozilozera ndi chosankha href
kapena mawonekedwe ake data-bs-target
. Angapo <button>
kapena atha kuwonetsa <a>
ndikubisa chinthu ngati aliyense amachitchula ndi mawonekedwe href
akedata-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>
Kufikika
Onetsetsani kuti muwonjezere aria-expanded
ku chinthu chowongolera. Izi zikuwonetsa bwino momwe zinthu zomwe zimasokonekera zomwe zimalumikizidwa ndi zowongolera zowerengera zowonera ndi matekinoloje othandizira ofanana. Ngati chinthu chosokonekera chatsekedwa mwachisawawa, mawonekedwe omwe ali pagawo lowongolera ayenera kukhala ndi mtengo wa aria-expanded="false"
. Ngati mwakhazikitsa chinthu chogonja kuti chitsegulidwe mwachisawawa pogwiritsa ntchito show
kalasi, ikani aria-expanded="true"
pazowongolera m'malo mwake. Pulagiyi imangosintha izi pakuwongolera kutengera ngati chinthu chomwe chitha kugubuduka chatsegulidwa kapena kutsekedwa (kudzera pa JavaScript, kapena chifukwa wogwiritsa ntchitoyo adayambitsa chinthu china chowongolera chomwe chimamangiriridwanso ku chinthu chomwe chimatha). Ngati chinthu chowongolera cha HTML si batani (mwachitsanzo, <a>
kapena <div>
), mawonekedwerole="button"
ziyenera kuwonjezeredwa ku element.
Ngati chinthu chomwe mumayang'anira chikuyang'ana chinthu chimodzi chomwe chimatha kugwa - mwachitsanzo, mawonekedwewo data-bs-target
akulozera kwa id
chosankha - muyenera kuwonjezera chizindikiritso aria-controls
ku chinthu chowongolera, chomwe chili ndi id
chinthu chomwe chimatha kugwa. Owerenga zenera amakono ndi matekinoloje othandizira ofanana amagwiritsa ntchito izi kuti apatse ogwiritsa ntchito njira zazifupi kuti ayende molunjika ku chinthu chomwe chimasokonekera chokha.
Dziwani kuti kukhazikitsidwa kwa Bootstrap pakadali pano sikukhudzana ndi machitidwe osiyanasiyana a kiyibodi omwe akufotokozedwa mu WAI-ARIA Authoring Practices 1.1 accordion pattern - muyenera kuziphatikiza nokha ndi JavaScript yokhazikika.
Sass
Zosintha
$transition-collapse: height .35s ease;
Maphunziro
Makalasi osinthika atha kupezeka scss/_transitions.scss
chifukwa amagawidwa m'magawo angapo (kugwa ndi accordion).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Kugwiritsa ntchito
Pulagi yakugwa imagwiritsa ntchito makalasi angapo kuti athetse kukweza kolemera:
.collapse
amabisa zomwe zili.collapse.show
zikuwonetsa zomwe zili.collapsing
imawonjezeredwa pamene kusintha kukuyamba, ndikuchotsedwa ikatha
Maphunzirowa amapezeka mu _transitions.scss
.
Kudzera muzochita za data
Ingowonjezerani data-bs-toggle="collapse"
ndi a data-bs-target
ku chinthucho kuti muzipereka chiwongolero cha chinthu chimodzi kapena zingapo zomwe zimatha kutha. Malingaliro data-bs-target
amavomereza chosankha cha CSS kuti agwiritse ntchito kugwa. Onetsetsani kuti mwawonjezera kalasi collapse
ku chinthu chomwe chimatha. Ngati mukufuna kuti isatseguke, onjezani kalasi yowonjezera show
.
Kuti muwonjeze kasamalidwe ka gulu ngati accordion kumalo otha kugwa, onjezani mawonekedwe a data data-bs-parent="#selector"
. Onani pachiwonetsero kuti muwone izi zikugwira ntchito.
Kudzera pa JavaScript
Yambitsani pamanja ndi:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Zosankha
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-bs-
, monga mu data-bs-parent=""
.
Dzina | Mtundu | Zosasintha | Kufotokozera |
---|---|---|---|
parent |
kusankha | jQuery chinthu | Chithunzi cha DOM | false |
Ngati kholo liperekedwa, ndiye kuti zinthu zonse zomwe zimasokonekera pansi pa khololo zidzatsekedwa chinthu chosokonekerachi chiwonetsedwa. (zofanana ndi chikhalidwe cha accordion - izi zimadalira card kalasi). Chikhalidwecho chiyenera kukhazikitsidwa pa malo omwe angagwe. |
toggle |
boolean | true |
Imasintha chinthu chomwe chimasokonekera pakuyitanitsa |
Njira
Asynchronous njira ndi kusintha
Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .
Imatsegula zomwe zili patsamba lanu ngati chinthu chosokonekera. Imavomereza zomwe mungachite object
.
Mutha kupanga chiwonetsero chakugwa ndi womanga, mwachitsanzo:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Njira | Kufotokozera |
---|---|
toggle |
Imasintha zinthu zomwe zimagundika kuti ziwonetsedwe kapena zobisika. Imabwereranso kwa woyimbayo chinthu chomwe chingathe kutha sichinasonyezedwe kapena kubisika (ie chisanachitike shown.bs.collapse kapena hidden.bs.collapse chochitikacho). |
show |
Imawonetsa chinthu chomwe chimatha kutha. Imabwereranso kwa woyimbayo chinthu chomwe chingathe kutha chisanasonyezedwe (mwachitsanzo, shown.bs.collapse chochitikacho chisanachitike). |
hide |
Imabisa chinthu chomwe chimatha kutha. Imabwereranso kwa woyimbayo chinthu chomwe chingathe kutha sichinabisike (mwachitsanzo, hidden.bs.collapse chochitikacho chisanachitike). |
dispose |
Imawononga kugwa kwa chinthu. (Imachotsa deta yosungidwa pa chinthu cha DOM) |
getInstance |
Njira yosasunthika yomwe imakupatsani mwayi wopeza kugwa kolumikizidwa ndi chinthu cha DOM, mutha kuchigwiritsa ntchito motere:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Njira yosasunthika yomwe imabweretsanso chochitika chakugwa cholumikizidwa ndi chinthu cha DOM kapena kupanga china china ngati sichinayambike. Mutha kugwiritsa ntchito motere:bootstrap.Collapse.getOrCreateInstance(element) |
Zochitika
Gulu la kugwa la Bootstrap limawulula zochitika zingapo kuti zigwirizane ndi kugwa.
Mtundu wa chochitika | Kufotokozera |
---|---|
show.bs.collapse |
Chochitika ichi chimayaka nthawi yomweyo show njira yachitsanzo itayitanidwa. |
shown.bs.collapse |
Chochitikachi chimachotsedwa pomwe chinthu chakugwa chawonetsedwa kwa wogwiritsa ntchito (chidikirira kuti kusintha kwa CSS kumalize). |
hide.bs.collapse |
Chochitikachi chimathamangitsidwa nthawi yomweyo hide njirayo itayitanidwa. |
hidden.bs.collapse |
Chochitikachi chimachotsedwa pomwe chinthu chakugwa chabisidwa kwa wogwiritsa ntchito (chidikirira kuti kusintha kwa CSS kumalize). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})