Hāneʻe
E hoʻololi i ka ʻike ʻana o ka ʻike ma kāu papahana me kekahi mau papa a me kā mākou JavaScript plugins.
Pehea e hana ai
Hoʻohana ʻia ka plugin JavaScript collapse e hōʻike a hūnā i ka ʻike. Hoʻohana ʻia nā pihi a i ʻole nā heleuma e like me nā mea hoʻomaka i palapala ʻia i nā mea kikoʻī āu e hoʻololi ai. ʻO ka hāʻule ʻana o kahi mea e hoʻolalelale i ka height
waiwai mai kona waiwai i kēia manawa i 0
. Hāʻawi ʻia pehea e mālama ai ʻo CSS i nā animation, ʻaʻole hiki iā ʻoe ke hoʻohana padding
ma kahi .collapse
mea. Akā, e hoʻohana i ka papa ma ke ʻano he mea hoʻopili kūʻokoʻa.
prefers-reduced-motion
nīnau media. E ʻike
i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .
Laʻana
Kaomi i nā pihi ma lalo nei e hōʻike a hūnā i kekahi mea ma o nā hoʻololi papa:
.collapse
huna mea.collapsing
hoʻohana ʻia i ka wā hoʻololi.collapse.show
hōʻike maʻiʻo
ʻO ka maʻamau, manaʻo mākou e hoʻohana i kahi pihi me ke data-bs-target
ʻano. ʻOiai ʻaʻole ʻōlelo ʻia mai kahi manaʻo semantic, hiki iā ʻoe ke hoʻohana i kahi loulou me ke href
ʻano (a me kahi role="button"
). I nā hihia ʻelua, data-bs-toggle="collapse"
pono ka mea.
<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>
Nā pahu hopu lehulehu
Hiki iā A a i <button>
ʻole <a>
ke hōʻike a hūnā i nā mea he nui ma ke kuhikuhi ʻana iā lākou me kahi mea koho ma kāna ʻano a i href
ʻole data-bs-target
nā hiʻohiʻona. Nui <button>
a <a>
hiki ke hōʻike a hūnā i kahi mea inā e kuhikuhi kēlā me kēia me kā l��kou a i href
ʻole data-bs-target
ʻano
<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>
Hiki ke komo
E hōʻoia e hoʻohui aria-expanded
i ka mea hoʻomalu. Hōʻike maopopo kēia ʻano i ke kūlana o kēia manawa o ka mea hiki ke hoʻopili ʻia i ka mana i ka nānā ʻana i nā mea heluhelu a me nā ʻenehana kōkua like. Inā pani ʻia ka mea hiki ke hoʻoheheʻe ʻia ma ke ʻano paʻamau, pono e loaʻa i ke ʻano o ka mea mana ka waiwai o aria-expanded="false"
. Inā ua hoʻonoho ʻoe i ka mea hiki ke hoʻoheheʻe ʻia e wehe ʻia ma ka hoʻohana ʻana i ka show
papa, e hoʻonoho aria-expanded="true"
ma ka mana. E hoʻololi ʻokoʻa ka plugin i kēia ʻano ma luna o ka mana e pili ana i ka wehe ʻana a i ʻole ka pani ʻana o ka mea collapsible (ma o JavaScript, a i ʻole no ka mea hoʻohana ka mea hoʻohana i kahi mea mana ʻē aʻe i hoʻopaʻa ʻia i ka mea hiki ke collapsible). Inā ʻaʻole he pihi ka ʻelemu HTML o ka mea hoʻomalu (e laʻa, a i <a>
ʻole <div>
), ka ʻanorole="button"
pono e hoʻohui i ka mea.
Inā e huli ana kāu mea hoʻomalu i hoʻokahi mea hiki ke hoʻoheheʻe ʻia - ʻo ia hoʻi ke data-bs-target
kuhikuhi nei ka ʻano i kahi id
mea koho - pono ʻoe e hoʻohui i ka aria-controls
ʻano i ka mea hoʻomalu, i loaʻa ka id
mea hiki ke hoʻoheheʻe ʻia. Hoʻohana ka poʻe heluhelu ʻaoʻao o kēia wā a me nā ʻenehana kōkua like i kēia ʻano e hāʻawi i nā mea hoʻohana i nā ʻaoʻao pōkole hou e hoʻokele pololei i ka mea hiki ke hoʻoheheʻe ʻia.
E hoʻomanaʻo, ʻaʻole i uhi ʻia ka hoʻokō ʻana o Bootstrap i nā pānaʻi kīwī koho like ʻole i wehewehe ʻia ma ka WAI-ARIA Authoring Practices 1.1 accordion pattern - pono ʻoe e hoʻokomo iā ʻoe iho me ka JavaScript maʻamau.
Sass
Nā mea hoʻololi
$transition-collapse: height .35s ease;
Nā papa
Hiki ke ʻike ʻia nā papa hoʻololi hāʻule ma scss/_transitions.scss
ke kaʻana like ʻana o kēia mau mea ma nā ʻāpana he nui (collapse and accordion).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Hoʻohana
Hoʻohana ka collapse plugin i kekahi mau papa e hoʻokō i ka hāpai kaumaha:
.collapse
hūnā i ka ʻike.collapse.show
hōʻike i ka ʻike.collapsing
hoʻohui ʻia i ka wā e hoʻomaka ai ka hoʻololi, a wehe ʻia i ka wā e pau ai
Hiki ke loaʻa kēia mau papa ma _transitions.scss
.
Ma o nā hiʻohiʻona ʻikepili
Hoʻohui wale data-bs-toggle="collapse"
a me kahi data-bs-target
i ka mea e hāʻawi ʻakomi i ka mana o hoʻokahi a ʻoi aku paha nā mea hiki ke collapsible. data-bs-target
ʻAe ka ʻano i kahi mea koho CSS e hoʻopili ai i ka hāʻule . E hōʻoia e hoʻohui i ka papa collapse
i ka mea hiki ke collapsible. Inā makemake ʻoe e wehe paʻamau, e hoʻohui i ka papa hou show
.
No ka hoʻohui ʻana i ka hoʻokele hui e like me ka accordion i kahi ʻāpana collapsible, hoʻohui i ke ʻano ʻikepili data-bs-parent="#selector"
. E nānā i ka demo e ʻike i kēia i ka hana.
Ma o JavaScript
E ho'ā me ka lima me:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Nā koho
Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-bs-
, e like me ka data-bs-parent=""
.
inoa | ʻAno | Default | wehewehe |
---|---|---|---|
parent |
mea koho | jQuery mea | ʻElemu DOM | false |
Inā hāʻawi ʻia ka makua, a laila e pani ʻia nā mea hiki ke hoʻoheheʻe ʻia ma lalo o ka makua i ʻōlelo ʻia ke hōʻike ʻia kēia mea hiki. (e like me ka hana accordion kuʻuna - pili kēia i ka card papa). Pono e hoʻonoho ʻia ka ʻano ma ka wahi i hiki ke hoʻoheheʻe ʻia. |
toggle |
boolean | true |
Hoʻololi i ka mea hiki ke collapsible ma ke kāhea ʻana |
Nā ʻano hana
Nā ʻano asynchronous a me nā hoʻololi
Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .
Ho'ā i kāu ʻike ma ke ʻano he mea hiki ke collapsible. ʻAe i kahi koho koho object
.
Hiki iā ʻoe ke hana i kahi hiʻohiʻona hāʻule me ka mea hana, no ka laʻana:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Kaʻina hana | wehewehe |
---|---|
toggle |
Hoʻololi i kahi mea hiki ke hōʻike ʻia a hūnā ʻia paha. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a i ʻole huna ʻia o ka mea hiki ke hoʻoneʻe ʻia (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.collapse a i ʻole).hidden.bs.collapse |
show |
Hōʻike i kahi mea hiki ke collapsible. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea hiki ke hoʻoheheʻe ʻia (e laʻa, ma mua o ka hiki ʻana o ka shown.bs.collapse hanana). |
hide |
Hūnā i kahi mea hiki ke collapsible. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka mea hiki ke hoʻoheheʻe ʻia (e laʻa, ma mua o ka hiki ʻana o ka hidden.bs.collapse hanana). |
dispose |
Hoʻopau i ka hāʻule ʻana o kahi mea. (Wehe i ka ʻikepili i mālama ʻia ma ka mea DOM) |
getInstance |
ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka hiʻohiʻona e pili ana i kahi mea DOM, hiki iā ʻoe ke hoʻohana e like me kēia:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
ʻO ke ʻano static e hoʻihoʻi i kahi hiʻohiʻona e pili ana i kahi mea DOM a i ʻole e hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia. Hiki iā ʻoe ke hoʻohana e like me kēia:bootstrap.Collapse.getOrCreateInstance(element) |
Nā hanana
Hōʻike ka papa hāʻule o Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana hāʻule.
ʻAno hanana | wehewehe |
---|---|
show.bs.collapse |
Hoʻomaka koke kēia hanana i ke show kāhea ʻia ʻana o ke ʻano hana. |
shown.bs.collapse |
Hoʻopau ʻia kēia hanana ke ʻike ʻia kahi mea hāʻule i ka mea hoʻohana (e kali no ka hoʻopau ʻana o CSS). |
hide.bs.collapse |
Hoʻopau koke ʻia kēia hanana ke hide kāhea ʻia ke ʻano. |
hidden.bs.collapse |
Hoʻopau ʻia kēia hanana ke hūnā ʻia kahi mea hāʻule mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})