daa
Jiri klaasị ole na ole na plugins JavaScript were tụgharịa visibiliti ọdịnaya n'ofe ọrụ gị.
Ka o si arụ ọrụ
A na-eji ngwa mgbakwunye Javascript daa iji gosi na zoo ọdịnaya. A na-eji bọtịnụ ma ọ bụ arịlịka dị ka ihe na-akpali akpali nke edobere na ihe ụfọdụ ị na-atụgharị. Ịdakpọ ihe ga-eme ka height
uru ya dị ugbu a gaa 0
. Nyere ka CSS si ejikwa animation, ị nweghị ike iji padding
na .collapse
mmewere. Kama, jiri klaasị ahụ dị ka ihe mkpuchi nwere onwe.
prefers-reduced-motion
ajụjụ mgbasa ozi. Hụ akụkụ
ngagharị ewelatala nke akwụkwọ nnweta anyị .
Ọmụmaatụ
Pịa bọtịnụ dị n'okpuru iji gosi ma zoo ihe ọzọ site na mgbanwe klaasị:
.collapse
na-ezochi ọdịnaya.collapsing
etinyere n'oge mgbanwe.collapse.show
na-egosi ọdịnaya
N'ozuzu, anyị na-akwado iji bọtịnụ nwere data-target
njirimara. Ọ bụ ezie na akwadoghị ya site n'echiche semantic, ị nwekwara ike iji njikọ nwere href
njirimara (na a role="button"
). N'okwu abụọ a, data-toggle="collapse"
achọrọ ya.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-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>
Kehoraizin
Ngwa mgbakwunye ọdịda na-akwado ndakpọ kehoraizin. Tinye .width
klaasị mgbanwe ka ị gbanwee width
ma height
tọọ width
n'ihe gbasara ụmụaka. Enwere onwe gị ide Sass omenala gị, jiri ụdị inline, ma ọ bụ jiri ngwa obosara anyị .
min-height
setịpụrụ iji zere imegharị oke na doc anyị, nke a abụghị ihe achọrọ n'ụzọ doro anya.
Naanị ihe width
dị na ihe ụmụaka chọrọ.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Ọtụtụ ebumnuche
A <button>
ma ọ bụ <a>
nwee ike igosi ma zoo ọtụtụ ihe site na iji JQuery họrọ ha na href
njirimara ya data-target
. Ọtụtụ <button>
ma ọ bụ <a>
nwee ike igosi ma zoo otu mmewere ma ọ bụrụ na onye ọ bụla n'ime ha na-eji ya href
ma ọ bụ data-target
njiri mara ya
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-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>
Ihe atụ Accordion
Iji akụrụngwa kaadị , ị nwere ike ịgbatị omume ndabara ndabara iji mepụta accordion. Iji nweta ụdị accordion nke ọma, jide n'aka na ị ga-eji .accordion
ihe mkpuchi.
.show
klaasị.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>
Nnweta
Jide n'aka na ị ga-agbakwunye aria-expanded
na ihe njikwa. Njirimara a na-egosi n'ụzọ doro anya ọnọdụ ugbu a nke mmewere nwere ike ịdaba na njikwa na ndị na-agụ ihuenyo yana teknụzụ enyemaka yiri ya. Ọ bụrụ na ejiri ndabara mechie mmewere nwere ike ịdaba, njirimara dị na mmewere njikwa kwesịrị inwe uru nke aria-expanded="false"
. Ọ bụrụ na ịtọọla mmewere enwere ike imeghe site na ndabara site na iji show
klas, tọọ aria-expanded="true"
na njikwa kama. Ngwa mgbakwunye ahụ ga-agbanwe àgwà a na-akpaghị aka na njikwa dabere na emeghere ma ọ bụ mechie mmewere nke nwere ike imebi (site na Javascript, ma ọ bụ n'ihi na onye ọrụ kpalitere ihe njikwa ọzọ jikọtara ya na otu mmewere). Ọ bụrụ na ihe HTML nke ihe njikwa ahụ abụghị bọtịnụ (dịka ọmụmaatụ, ihe <a>
ma ọ bụ <div>
), njirimara ahụrole="button"
kwesịrị ịgbakwunye na mmewere.
Ọ bụrụ na ihe njikwa gị na-ezubere iche maka otu mmewere nwere ike imebi - ya bụ data-target
njirimara na-atụ aka na onye id
nhọpụta - ị ga-agbakwunye aria-controls
njirimara na mmewere njikwa, nwere ihe nwere id
ike imebi. Ndị na-agụ ihuenyo ọgbara ọhụrụ na teknụzụ enyemaka ndị yiri ya na-eji njirimara a nye ndị ọrụ ụzọ mkpirisi agbakwunyere iji gaa ozugbo na mmewere nwere ike ịdaba n'onwe ya.
Rịba ama na mmejuputa atumatu Bootstrap ugbu a anaghị ekpuchi mmekọrịta dị iche iche nke ahụigodo dị iche iche akọwara na ụkpụrụ ARIA Authoring Practices Guide - ị ga-achọ itinye ndị a n'onwe gị na Javascript omenala.
Ojiji
Ngwa mgbakwunye ndakpọ ahụ na-eji klaasị ole na ole iji jikwaa ibuli elu:
.collapse
na-ezochi ọdịnaya.collapse.show
na-egosi ọdịnaya.collapsing
na-agbakwunyere mgbe mgbanwe na-amalite, ma wepụ ya mgbe ọ gwụchara
Enwere ike ịchọta klas ndị a na _transitions.scss
.
Site na njirimara data
Dị nnọọ tinye data-toggle="collapse"
na a data-target
na mmewere na-akpaghị aka ikenye akara nke otu ma ọ bụ karịa ihe ndakpọ. Àgwà ahụ data-target
na-anabata onye nhọpụta CSS iji tinye ọdịda ahụ. Jide n'aka na ịtinye klas collapse
ahụ na mmewere nwere ike ịdaba. Ọ bụrụ na ị ga-achọ ka ọ meghee, tinye klaasị agbakwunyere show
.
Ka ịgbakwunye njikwa otu accordion dị ka mpaghara nwere ike imebi, tinye njirimara data data-parent="#selector"
. Rụtụ aka na ngosi ngosi ka ịhụ nke a na-arụ ọrụ.
Site na Javascript
Jiri aka jiri:
$('.collapse').collapse()
Nhọrọ
Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-
, dị ka ọ dị na data-parent=""
.
Aha | Ụdị | Ọdabara | Nkọwa |
---|---|---|---|
nne na nna | onye nhọpụta | ihe jQuery | DOM element | ụgha | Ọ bụrụ na enyere nne na nna, mgbe ahụ, ihe niile ga-adakpọ n'okpuru nne na nna akọwapụtara ga-emechi mgbe egosiri ihe a nwere ike ịdaba. (dị ka omume accordion ọdịnala - nke a dabere na card klaasị). Ekwesịrị ịtọ njiri mara na mpaghara ebe a ga-akụda. |
tụgharịa | boolean | eziokwu | Na-atụgharị ihe nwere ike ịdaba na oku |
Ụzọ
Ụzọ asynchronous na ntụgharị
Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .
.collapse(options)
Na-eme ka ọdịnaya gị rụọ ọrụ ka ihe nwere ike imebi. Nabata nhọrọ nhọrọ object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Na-atụgharị ihe nwere ike ịdaba ka egosiri ma ọ bụ zoo. Na-alaghachikwute onye na-akpọ oku tupu egosiri ma ọ bụ zoo ihe nwere ike ịdaba (ya bụ tupu ihe omume shown.bs.collapse
ma ọ bụ hidden.bs.collapse
emee).
.collapse('show')
Na-egosi mmewere nwere ike ịdaba. Na-alaghachikwute onye na-akpọ oku tupu egosipụta mmewere nwere ike ịdaba (ya bụ tupu shown.bs.collapse
mmemme emee).
.collapse('hide')
Na-ezobe mmewere nwere ike ịdaba. Na-alaghachikwute onye na-akpọ oku tupu ezobe ihe nwere ike ịdaba (ya bụ, tupu ihe hidden.bs.collapse
omume emee).
.collapse('dispose')
Na-ebibi ndakpọ mmewere.
Ihe omume
Klas ndakpọ Bootstrap na-ekpughe ihe omume ole na ole maka itinye aka n'ọrụ ọdịda.
Ụdị mmemme | Nkọwa |
---|---|
gosi.bs.dakpu | Ihe omume a na-agba ọkụ ozugbo show a na-akpọ usoro ihe atụ. |
egosiri.bs.dakpọ | A na-agbanyụ mmemme a mgbe onye ọrụ mere ka ihe ndakpọ pụtara (ga-echere mgbanwe CSS ka agwụchaa). |
zoo.bs.dakpu | A na-agbapụ ihe omume a ozugbo mgbe hide a na-akpọ usoro ahụ. |
zoro ezo.bs.dakpu | A na-agbapụ mmemme a mgbe ezoro ezoro onye ọrụ ihe ndakpọ (ga-echere mgbanwe CSS ka agwụchaa). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})