Marpuog
I-toggle ti pannakakita ti linaon iti ballasiw ti proyektom babaen ti sumagmamano a klase ken dagiti pluginmi ti JavaScript.
No kasano ti panagandar dayta
Ti collapse a plugin ti JavaScript ket maus-usar a mangipakita ken mangilemmeng ti linaon. Dagiti buton wenno angkla ket mausar a kas dagiti trigger a namapa kadagiti espesipiko nga elemento nga i-toggle-mo. Ti panangi-collap ti maysa nga elemento ket mangpabiag ti height
manipud iti agdama a pategna aginggana iti 0
. No maited no kasano a ti CSS ket mangasikaso kadagiti animasion, saanmo a mabalin nga usaren padding
iti maysa .collapse
nga elemento. Imbes ketdi, usaren ti klase a kas maysa nga agwaywayas nga elemento ti panagbalkot.
prefers-reduced-motion
panagsaludsod ti media. Kitaen ti
benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .
Pagwadan
I-klik dagiti buton iti baba tapno maipakita ken ilemmeng ti sabali nga elemento babaen dagiti panagbalbaliw ti klase:
.collapse
ilemmeng ti linaonna.collapsing
ket mayaplikar bayat dagiti panagbalbaliw.collapse.show
ipakitana ti linaonna
Kaaduanna, irekomendarmi ti panagusar ti buton nga addaan iti data-target
attribute. Bayat a saan a mairekomendar manipud iti semantiko a punto de bista, mabalinmo pay nga usaren ti silpo nga addaan iti href
attribute (ken a role="button"
). Iti agpada a kaso, ti data-toggle="collapse"
ket kasapulan.
<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>
Paidda
Ti plugin ti collapse ket mangsuporta pay ti horizontal collapsing. Inayon ti .width
klase ti mangbalbaliw tapno agbaliw ti width
imbes a height
ken mangikeddeng ti a width
iti dagus nga elemento ti ubing. Mariknam a nawaya nga agsurat iti bukodmo a kostumbre a Sass, agusar kadagiti estilo ti inline, wenno agusar kadagiti utilidadmi iti kalawa .
min-height
set tapno maliklikan ti nalabes a panagpinta manen kadagiti dok-tayo, daytoy ket saan a nalawag a kasapulan.
Ti laeng width
on the child element ti kasapulan.
<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>
Adu a puntiria
A <button>
wenno <a>
mabalinna nga ipakita ken ilemmeng dagiti adu nga elemento babaen ti panangireperensiana kadagitoy babaen ti JQuery selector iti href
wenno data-target
attribute-na. Multiple <button>
wenno <a>
mabalin nga ipakita ken ilemmeng ti maysa nga elemento no tunggal maysa ket reperensiada daytoy babaen ti href
or data-target
attribute -da
I-toggle ti umuna nga elemento
<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>
Pagarigan ti akordeon
Babaen ti panangusar iti paset ti kard , mabalinmo a palawaen ti default a kababalin ti panagreggaay tapno makaaramidka iti akordeon. Tapno umiso a maragpat ti estilo ti akordeon, siguraduenyo nga usaren .accordion
kas balkot.
.show
klase.
<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>
Ti pannakagun-od
Siguraduen nga inayon aria-expanded
ti elemento ti panangkontrol. Daytoy a kababalin ket nalawag a mangipakaammo ti agdama a kasasaad ti maibukbok nga elemento a naisilpo iti kontrol kadagiti agbasbasa ti iskrin ken dagiti kapada a makatulong a teknolohia. No ti maibukbok nga elemento ket naserraan babaen ti kasisigud, ti attribute iti elemento ti panagtengngel ket rumbeng nga addaan iti pateg ti aria-expanded="false"
. No inkeddengmo ti maibukbok nga elemento a malukatan babaen ti default babaen ti panagusar ti show
klase, ikeddengmo aria-expanded="true"
ketdi ti kontrol. Ti plugin ket automatiko a mangibalbaliw iti daytoy a kababalin iti kontrol a naibatay no ti maibukbok nga elemento ket naluktan wenno naserraan wenno saan (babaen ti JavaScript, wenno gapu ta ti agar-aramat ket nangtignay ti sabali nga elemento ti panagtengngel a naisilpo met iti isu met laeng a maibukbok nga elemento). No ti elemento ti HTML ti elemento ti panangtengngel ket saan a buton (kas pagarigan, maysa <a>
wenno <div>
), ti attributerole="button"
rumbeng a mainayon iti elemento.
No ti elemento ti panagtengngelmo ket mangpuntiria ti maymaysa a maibukbok nga elemento – kayatna a sawen ti data-target
attribute ket mangiturturong iti maysa a id
mangpili – rumbeng nga inayonmo ti aria-controls
attribute iti elemento ti kontrol, a naglaon ti id
ti maibukbok nga elemento. Dagiti moderno a managbasa ti iskrin ken dagiti kapada a makatulong a teknolohia ket agus-usar iti daytoy a kababalin tapno mangipaay kadagiti agar-aramat kadagiti kanayonan a ab-ababa a dalan tapno direkta nga ag-navigate iti maibukbok nga elemento a mismo.
Imutektekanyo a ti agdama a pannakaipatungpal ti Bootstrap ket saan a mangsaklaw kadagiti nadumaduma a panagtitinnulong ti teklado a nailadawan iti padron ti akordeon ti Giya ti Panagsurat ti Panagsurat ti ARIA - kasapulam nga iraman dagitoy a mismo babaen ti kostumbre a JavaScript.
Panagusar
Ti plugin ti pannakarba ket agus-usar kadagiti sumagmamano a klase tapno mangasikaso ti nadagsen a panagipangato:
.collapse
ilemmengna ti linaonna.collapse.show
ipakitana ti linaonna.collapsing
mainayon no mangrugi ti panagbalbaliw, ken maikkat no malpas
Dagitoy a klase ket mabalin a masarakan iti _transitions.scss
.
Babaen kadagiti attribute ti datos
Basta inayon data-toggle="collapse"
ken a data-target
iti elemento tapno automatiko a mangituding ti kontrol ti maysa wenno ad-adu pay a mai-collapsible nga elemento. Ti data-target
attribute ket umawat ti maysa a CSS a mangpili a pangipakat ti collapse iti. Siguraduen nga inayon ti klase collapse
iti collapsible nga elemento. No kayatmo a default a malukatan, inayon ti kanayonan a klase show
.
Tapno manginayon ti kasla akordeon a panagituray ti grupo iti maysa a maibukbok a lugar, inayon ti kabileg ti datos data-parent="#selector"
. Kitaen ti demo tapno makita daytoy nga agtigtignay.
Babaen ti JavaScript
Pagbalinen a manual babaen ti:
$('.collapse').collapse()
Dagiti Pagpilian
Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-
, a kas iti data-parent=""
.
Nagan | Tipo | Default | Panangiladawan |
---|---|---|---|
nagannak | agpili ti | jQuery nga banag | DOM nga elemento | saan nga agpayso | No ti nagannak ket naited, kalpasanna amin dagiti maibukbok nga elemento iti baba ti naikeddeng a nagannak ket maiserra no daytoy a maibukbok a banag ket maipakita. (kapada ti tradisional a kababalin ti akordeon - daytoy ket agpannuray iti card klase). Ti attribute ket masapul a maikeddeng iti target a collapsible a lugar. |
ag-toggle nga | boolean nga | agpayso | I-toggles ti collapsible nga elemento iti inbokasion |
Dagiti Pamay-an
Dagiti asynchronous a pamay-an ken panagbalbaliw
Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .
Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .
.collapse(options)
Paaktiboenna ti linaonmo kas maysa a collapsible nga elemento. Awaten ti maysa nga opsional a pagpilian object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
I-toggles ti collapsible nga elemento iti maipakita wenno mailemmeng. Agsubli iti tumawag sakbay a ti maibukbok nga elemento ket aktual a naipakita wenno nailemmeng (kayatna a sawen sakbay a mapasamak ti shown.bs.collapse
wenno hidden.bs.collapse
pasamak).
.collapse('show')
Ipakita ti maysa a collapsible nga elemento. Agsubli iti umaw-awag sakbay a ti maibukbok nga elemento ket aktual a naipakita (kayatna a sawen sakbay a shown.bs.collapse
mapasamak ti pasamak).
.collapse('hide')
Ilemmengna ti maysa a collapsible nga elemento. Agsubli iti tumawag sakbay a ti maibukbok nga elemento ket aktual a nailemmeng (kayatna a sawen sakbay a hidden.bs.collapse
mapasamak ti pasamak).
.collapse('dispose')
Dadaelenna ti pannakarba ti maysa nga elemento.
Dagiti Pasamak
Ti klase ti panagreggaay ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti panagreggaay.
Kita ti Pasamak | Panangiladawan |
---|---|
ipakita.bs.ag-collapse | Daytoy a pasamak ket agputok a dagus no ti show pamay-an ti pagarigan ket maawagan. |
naipakita.bs.collapse | Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket naaramid a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas). |
ilemmeng.bs.ag-collapse | Daytoy a pasamak ket dagus a mapaputok no ti hide pamay-an ket naawagan. |
nailemmeng.bs.ag-collapse | Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})