firodanan'ny
Ampifamadiho ny fahitana ny atiny manerana ny tetikasanao miaraka amin'ny kilasy vitsivitsy sy ny plugins JavaScript.
Ny fomba fiasa
Ny plugin JavaScript collapse dia ampiasaina hanehoana sy hanafenana votoaty. Ny bokotra na vatofantsika dia ampiasaina ho trigger izay voasoritra amin'ny singa manokana avadikao. Ny fandrotsahana singa iray dia hampihetsika ny height
avy amin'ny sandany ankehitriny ho 0
. Raha jerena ny fomba fitantanana ny sary mihetsika dia tsy azonao ampiasaina padding
amin'ny .collapse
singa iray ny CSS. Ampiasao kosa ny kilasy ho singa famonosana mahaleo tena.
prefers-reduced-motion
fangatahan'ny haino aman-jery ny fiantraikan'io singa io. Jereo ny
fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .
OHATRA
Kitiho ny bokotra etsy ambany mba hampisehoana sy hanafenana singa hafa amin'ny alàlan'ny fanovana kilasy:
.collapse
manafina votoaty.collapsing
dia ampiharina mandritra ny tetezamita.collapse.show
mampiseho votoaty
Amin'ny ankapobeny, manoro hevitra izahay hampiasa bokotra misy ny data-bs-target
toetra. Na dia tsy soso-kevitra amin'ny fomba fijery semantika aza, azonao atao koa ny mampiasa rohy misy ny href
toetra (sy a role="button"
). Amin'ireo tranga roa ireo, data-bs-toggle="collapse"
dia ilaina ny.
<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>
Tanjona marobe
A <button>
na <a>
afaka mampiseho sy manafina singa maromaro amin'ny fanondroana azy ireo miaraka amin'ny mpifidy ao amin'ny toetrany href
na ny data-bs-target
toetrany. Maro <button>
na <a>
afaka mampiseho sy manafina singa iray raha samy milaza izany miaraka amin'ny toetrany href
na ny data-bs-target
toetrany
Ampifamadiho ny singa voalohany
<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>
Accessibility
Ataovy azo antoka ny manampy aria-expanded
ny singa fanaraha-maso. Ity toetra ity dia mampita mazava ny toetry ny singa mirodana mifatotra amin'ny fanaraha-maso amin'ny mpamaky efijery sy ny teknolojia fanampiana mitovy amin'izany. Raha mihidy amin'ny alàlan'ny default ny singa azo rava, dia tokony hanana sanda aria-expanded="false"
. Raha toa ianao ka nametraka ny singa azo rava ho misokatra amin'ny alàlan'ny fampiasana ny show
kilasy dia apetraho aria-expanded="true"
amin'ny fanaraha-maso kosa. Ny plugin dia hanova ho azy io toetra io amin'ny fanaraha-maso mifototra amin'ny hoe nosokafana na nikatona ilay singa azo rava (tamin'ny alàlan'ny JavaScript, na satria ny mpampiasa dia niteraka singa fanaraha-maso hafa mifamatotra amin'ilay singa azo rava ihany koa). Raha tsy bokotra ny singa HTML an'ny singa fanaraha-maso (ohatra, <a>
na <div>
), ny toetrarole="button"
tokony ampiana amin'ny singa.
Raha mikendry singa tokana azo harodana ny singanao - izany hoe ny data-bs-target
toetra dia manondro id
mpifidy - tokony ampidirinao amin'ny aria-controls
singa fanaraha-maso ny toetra, misy ny id
singa azo rava. Ireo mpamaky efijery maoderina sy ireo teknolojia fanampiana mitovy amin'izany dia mampiasa an'io toetra io mba hanomezana ireo mpampiasa hitsin-dàlana fanampiny hivezivezy mivantana mankany amin'ilay singa azo rava.
Mariho fa ny fampiharana an'i Bootstrap amin'izao fotoana izao dia tsy mandrakotra ireo fifandraisana amin'ny klavier isan-karazany voalaza ao amin'ny WAI -ARIA Authoring Practices 1.1 accordion pattern - mila ampidirinao amin'ny JavaScript mahazatra ianao.
Sass
hiovaova
$transition-collapse: height .35s ease;
fianarana
Ny kilasin'ny tetezamita mirodana dia hita ao scss/_transitions.scss
satria zaraina amin'ny singa maro (firodana sy akorandriaka).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Fampiasana
Ny plugin collapse dia mampiasa kilasy vitsivitsy hifehezana ny fampiakarana mavesatra:
.collapse
manafina ny votoatiny.collapse.show
mampiseho ny votoatiny.collapsing
ampiana rehefa manomboka ny tetezamita, ary esorina rehefa tapitra
Ireo kilasy ireo dia azo jerena ao amin'ny _transitions.scss
.
Amin'ny alàlan'ny data attributes
Ampio fotsiny data-bs-toggle="collapse"
ary a data-bs-target
amin'ilay singa mba hanendry ho azy ny fanaraha-maso ny singa iray na maromaro mirodana. Ny data-bs-target
toetra dia manaiky mpifidy CSS hampiharana ny fianjerana. Ataovy azo antoka ny manampy ny kilasy collapse
amin'ny singa azo rava. Raha tianao ny hisokatra ho default dia ampio ny kilasy fanampiny show
.
Mba hanampiana ny fitantanana vondrona mitovy amin'ny akorandriaka amin'ny faritra azo harodana, ampio ny toetran'ny data data-bs-parent="#selector"
. Jereo ny demo raha te hahita izany amin'ny hetsika.
Amin'ny JavaScript
Alefa tanana amin'ny:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
FANDIKANA
Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-bs-
, toy ny ao amin'ny data-bs-parent=""
.
Anarana | Type | toerana misy anao | Description |
---|---|---|---|
parent |
mpifidy | jQuery object | singa DOM | false |
Raha omena ray aman-dreny, dia hikatona avokoa ny singa azo harodana eo ambanin'ny ray aman-dreny voatondro rehefa aseho ity singa azo harodana ity. (mitovitovy amin'ny fihetsika accordion nentim-paharazana - miankina amin'ny card kilasy izany). Ny toetra dia tsy maintsy apetraka amin'ny faritra kendrena azo rava. |
toggle |
boolean | true |
Manova ny singa azo harodana amin'ny fiantsoana |
fomba
Fomba sy fifindrana asynchronous
Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .
Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .
Manetsika ny atiny ho singa azo harodana. Manaiky safidy azo atao object
.
Azonao atao ny mamorona ohatra mirodana miaraka amin'ny mpanamboatra, ohatra:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
FOMBA | Description |
---|---|
toggle |
Manova singa azo harodana ho aseho na afenina. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny singa azo rava (izany hoe talohan'ny nitrangan'ny shown.bs.collapse na hidden.bs.collapse hetsika). |
show |
Mampiseho singa azo harodana. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny singa azo harodana (oh: alohan'ny shown.bs.collapse nitrangan'ny hetsika). |
hide |
Manafina singa azo harodana. Miverina any amin'ny mpiantso alohan'ny tena nafenina ny singa azo harodana (oh: alohan'ny hidden.bs.collapse nitrangan'ny hetsika). |
dispose |
Manimba ny firodanan'ny singa iray. (Esory ny angona voatahiry amin'ny singa DOM) |
getInstance |
Ny fomba static izay ahafahanao mahazo ny ohatra fianjerana mifandray amin'ny singa DOM, azonao ampiasaina toy izao:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Fomba static izay mamerina ohatra firodana mifandraika amin'ny singa DOM na mamorona vaovao raha toa ka tsy natomboka izany. Azonao atao ny mampiasa azy toy izao:bootstrap.Collapse.getOrCreateInstance(element) |
zava-mitranga
Ny kilasin'ny firodanan'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa mirodana.
Karazana hetsika | Description |
---|---|
show.bs.collapse |
Mirehitra avy hatrany ity hetsika ity rehefa show antsoina ny fomba fiasa. |
shown.bs.collapse |
Ity hetsika ity dia alefa rehefa misy singa mirodana hita ho hitan'ny mpampiasa (hiandry ny famitana ny fifindrana CSS). |
hide.bs.collapse |
Ity hetsika ity dia alefa avy hatrany rehefa hide nantsoina ny fomba. |
hidden.bs.collapse |
Ity hetsika ity dia voaroaka rehefa misy singa mianjera nafenina tamin'ny mpampiasa (hiandry ny fifindran'ny CSS ho vita). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})