Kunja
Geuza mwonekano wa maudhui katika mradi wako wote na madarasa machache na programu-jalizi zetu za JavaScript.
Inavyofanya kazi
Kunja JavaScript programu-jalizi hutumika kuonyesha na kuficha maudhui. Vifungo au nanga hutumiwa kama vichochezi ambavyo vimepangwa kwa vipengele maalum unavyogeuza. Kukunja kipengele kutahuisha height
kutoka kwa thamani yake ya sasa hadi 0
. Kwa kuzingatia jinsi CSS inavyoshughulikia uhuishaji, huwezi kutumia padding
kwenye .collapse
kipengee. Badala yake, tumia darasa kama nyenzo huru ya kufunga.
prefers-reduced-motion
hoja ya midia. Tazama
sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .
Mfano
Bofya vitufe vilivyo hapa chini ili kuonyesha na kuficha kipengele kingine kupitia mabadiliko ya darasa:
.collapse
huficha yaliyomo.collapsing
inatumika wakati wa mabadiliko.collapse.show
inaonyesha maudhui
Kwa ujumla, tunapendekeza kutumia kifungo na data-target
sifa. Ingawa haipendekezwi kutoka kwa mtazamo wa kisemantiki, unaweza pia kutumia kiunga kilicho na href
sifa (na role="button"
). Katika visa vyote viwili, data-toggle="collapse"
inahitajika.
<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>
Mlalo
Programu-jalizi ya kukunja pia inasaidia kukunja kwa mlalo. Ongeza .width
darasa la kirekebishaji ili kubadilisha width
badala ya height
na uweke width
kwenye kipengele cha mtoto. Jisikie huru kuandika Sass yako maalum, tumia mitindo ya ndani, au tumia huduma zetu za upana .
min-height
seti ya kuzuia kupaka rangi nyingi kupita kiasi katika hati zetu, hii haihitajiki kwa uwazi.
Tu width
juu ya kipengele cha mtoto inahitajika.
<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>
Malengo mengi
A <button>
au <a>
inaweza kuonyesha na kuficha vipengee vingi kwa kuvirejelea na kiteuzi cha JQuery katika kipengele chake href
au data-target
sifa. Nyingi <button>
au <a>
zinaweza kuonyesha na kuficha kipengele ikiwa kila kimoja kinarejelea na wao href
au data-target
sifa
<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>
Mfano wa accordion
Kwa kutumia kijenzi cha kadi , unaweza kupanua tabia chaguomsingi ya kukunja ili kuunda accordion. Ili kufikia vizuri mtindo wa accordion, hakikisha kutumia .accordion
kama kitambaa.
.show
darasa.
<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>
Ufikivu
Hakikisha kuongeza aria-expanded
kwenye kipengele cha kudhibiti. Sifa hii inaonyesha kwa uwazi hali ya sasa ya kipengele kinachoweza kukunjwa kilichounganishwa na udhibiti kwa visoma skrini na teknolojia saidizi sawa. Ikiwa kipengele kinachoweza kukunjwa kimefungwa kwa chaguo-msingi, sifa kwenye kipengele cha kudhibiti inapaswa kuwa na thamani ya aria-expanded="false"
. Ikiwa umeweka kipengee kinachoweza kukunjwa kufunguka kwa chaguomsingi kwa kutumia show
darasa, aria-expanded="true"
badala yake weka kidhibiti. Programu-jalizi itageuza kiotomatiki sifa hii kwenye kidhibiti kulingana na ikiwa kipengele kinachoweza kukunjwa kimefunguliwa au hakijafungwa (kupitia JavaScript, au kwa sababu mtumiaji alianzisha kipengele kingine cha udhibiti ambacho kimeunganishwa kwenye kipengele kile kile kinachoweza kukunjwa). Ikiwa kipengele cha HTML cha kipengele cha kudhibiti si kitufe (kwa mfano, a <a>
au <div>
), sifarole="button"
inapaswa kuongezwa kwa kipengele.
Ikiwa kipengele chako cha kudhibiti kinalenga kipengele kimoja kinachoweza kukunjwa - yaani data-target
sifa inaelekeza kwenye id
kiteuzi - unapaswa kuongeza aria-controls
sifa kwenye kipengele cha kudhibiti, kilicho na id
kipengele kinachoweza kukunjwa. Visomaji skrini vya kisasa na teknolojia saidizi kama hizo hutumia sifa hii kuwapa watumiaji njia za mkato za ziada za kusogeza moja kwa moja hadi kwenye kipengele chenyewe kinachoweza kukunjwa.
Kumbuka kuwa utekelezaji wa sasa wa Bootstrap haujumuishi mwingiliano mbalimbali wa kibodi uliofafanuliwa katika muundo wa mfuatano wa Mwongozo wa Mazoea ya Uandishi wa ARIA - utahitaji kujumuisha haya mwenyewe kwenye JavaScript maalum.
Matumizi
Programu-jalizi ya kukunja hutumia madarasa machache kushughulikia unyanyuaji mzito:
.collapse
huficha yaliyomo.collapse.show
inaonyesha yaliyomo.collapsing
huongezwa wakati mpito unapoanza, na kuondolewa ukikamilika
Madarasa haya yanaweza kupatikana katika _transitions.scss
.
Kupitia sifa za data
Ongeza tu data-toggle="collapse"
na a data-target
kwa kipengele ili kukabidhi kiotomatiki udhibiti wa kipengele kimoja au zaidi zinazoweza kukunjwa. Sifa data-target
inakubali kiteuzi cha CSS cha kutumia kukunja kwake. Hakikisha umeongeza darasa collapse
kwenye kipengele kinachoweza kukunjwa. Ikiwa ungependa ifungue chaguomsingi, ongeza darasa la ziada show
.
Ili kuongeza usimamizi wa kikundi kama accordion kwenye eneo linalokunjwa, ongeza sifa ya data data-parent="#selector"
. Rejelea onyesho ili kuona hili likiendelea.
Kupitia JavaScript
Washa wewe mwenyewe na:
$('.collapse').collapse()
Chaguo
Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-
, kama katika data-parent=""
.
Jina | Aina | Chaguomsingi | Maelezo |
---|---|---|---|
mzazi | kiteuzi | kitu cha jQuery | Kipengele cha DOM | uongo | Ikiwa mzazi ametolewa, basi vipengele vyote vinavyoweza kukunjwa chini ya mzazi aliyebainishwa vitafungwa wakati kipengee hiki kinachoweza kukunjwa kitaonyeshwa. (sawa na tabia ya jadi ya accordion - hii inategemea card darasa). Sifa lazima iwekwe kwenye eneo linalokunjwa lengwa. |
kugeuza | boolean | kweli | Hugeuza kipengele kinachoweza kukunjwa kwenye ombi |
Mbinu
Njia za Asynchronous na mabadiliko
Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .
.collapse(options)
Huwasha maudhui yako kama kipengele kinachoweza kukunjwa. Inakubali chaguo za hiari object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Hugeuza kipengele kinachoweza kukunjwa kuonyeshwa au kufichwa. Hurejesha kwa anayepiga kabla kipengele kinachoweza kukunjwa hakijaonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.collapse
au hidden.bs.collapse
tukio).
.collapse('show')
Inaonyesha kipengele kinachoweza kukunjwa. Hurejesha kwa mpigaji simu kabla kipengele kinachoweza kukunjwa hakijaonyeshwa (yaani kabla ya shown.bs.collapse
tukio kutokea).
.collapse('hide')
Huficha kipengele kinachoweza kukunjwa. Hurejesha kwa anayepiga kabla kipengele kinachoweza kukunjwa hakijafichwa (yaani kabla ya hidden.bs.collapse
tukio kutokea).
.collapse('dispose')
Huharibu mkunjo wa kipengele.
Matukio
Darasa la kukunja la Bootstrap linafichua matukio machache ya kunasa katika utendakazi wa kukunja.
Aina ya Tukio | Maelezo |
---|---|
onyesha.bs.kukunja | Tukio hili huwaka mara moja wakati show njia ya mfano inaitwa. |
imeonyeshwa.bs.kukunja | Tukio hili huwashwa wakati kipengele cha kukunja kimefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS yakamilike). |
ficha.bs.kunja | Tukio hili linafukuzwa mara moja wakati hide njia imeitwa. |
kufichwa.bs.kukunja | Tukio hili huwashwa wakati kipengele cha kukunja kimefichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS yakamilike). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})