Laghdaigh
Scoránaigh infheictheacht an ábhair ar fud do thionscadal le cúpla rang agus ár breiseán JavaScript.
Conas a oibríonn sé
Úsáidtear an breiseán JavaScript collapse chun ábhar a thaispeáint agus a cheilt. Úsáidtear cnaipí nó ancairí mar thruicear a dhéantar a mhapáil d’eilimintí sonracha a scoránaigh tú. Má thiteann eilimint, beochtófar an height
luach reatha go 0
. Mar gheall ar an gcaoi a láimhseálann CSS beochan, ní féidir leat é a úsáid padding
ar .collapse
eilimint. Ina áit sin, bain úsáid as an rang mar eilimint timfhilleadh neamhspleách.
prefers-reduced-motion
cheist na meán. Féach an
rannán tairiscint laghdaithe dár gcáipéisíocht inrochtaineachta .
Sampla
Cliceáil ar na cnaipí thíos chun eilimint eile a thaispeáint agus a cheilt trí athruithe ranga:
.collapse
seithí ábhar.collapsing
a chuirtear i bhfeidhm le linn aistrithe.collapse.show
léiríonn ábhar
Go ginearálta, molaimid úsáid a bhaint as cnaipe leis an data-target
tréith. Cé nach moltar é ó thaobh séimeantach de, is féidir leat nasc a úsáid leis an href
tréith (agus a role="button"
). Sa dá chás, data-toggle="collapse"
tá an gá.
<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>
Cothrománach
Tacaíonn an breiseán collapsing freisin le titim cothrománach. Cuir an .width
rang mionathraithe leis an trasdul width
in ionad height
agus socraigh width
ar an neasghné páiste. Ná bíodh drogall ort do Sass saincheaptha féin a scríobh, stíleanna inlíne a úsáid, nó ár bhfóntais leithead a úsáid .
min-height
chun athphéinteáil iomarcacha inár ndoiciméid a sheachaint, níl sé seo ag teastáil go sainráite.
Ní width
theastaíonn ach an eilimint ar an leanbh.
<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>
Spriocanna iolracha
A <button>
nó is féidir gnéithe iolracha a thaispeáint agus a cheilt trí thagairt a dhéanamh <a>
dóibh le roghnóir JQuery ina shaintréith. Iolrú nó is féidir dúil a thaispeáint agus a cheilt má thagraíonn siad dó lena n - airíonnahref
data-target
<button>
<a>
href
data-target
<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>
Sampla bosca ceoil
Ag baint úsáide as an gcomhpháirt cárta , is féidir leat a leathnú an t-iompar réamhshocraithe collapse a chruthú cairdín. Chun an stíl cairdín a bhaint amach i gceart, bí cinnte é a úsáid .accordion
mar chumhdach.
.show
rang.
<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>
Inrochtaineacht
Bí cinnte a chur aria-expanded
leis an eilimint rialaithe. Cuireann an tréith seo in iúl go sainráite staid reatha na heiliminte collapsible a bhaineann le rialú do léitheoirí scáileáin agus teicneolaíochtaí cúnta dá samhail. Má dhúntar an eilimint infhillte de réir réamhshocraithe, ba cheart go mbeadh luach aria-expanded="false"
. Má tá an eilimint infhillte socraithe agat le bheith oscailte de réir réamhshocraithe ag baint úsáide as an show
rang, socraigh aria-expanded="true"
ar an rialtán ina ionad sin. Scoránóidh an breiseán an tréith seo go huathoibríoch ar an rialú bunaithe ar cibé acu an bhfuil nó nach bhfuil an eilimint infhillte oscailte nó dúnta (trí JavaScript, nó toisc gur spreag an t-úsáideoir eilimint rialaithe eile atá ceangailte leis an eilimint infhillte chéanna freisin). Mura cnaipe é eilimint HTML na heiliminte rialaithe (m.sh., an <a>
nó <div>
), an tréithrole="button"
Ba chóir a chur leis an eilimint.
Má tá d’eilimint rialaithe ag díriú ar eilimint infhillte amháin – .i. tá an data-target
aitreabúid dírithe ar id
roghnóir – ba cheart duit an aria-controls
aitreabúid a chur leis an eilimint rialaithe, ina bhfuil an id
eilimint infhillte. Baineann léitheoirí scáileáin nua-aimseartha agus teicneolaíochtaí cúnta comhchosúla úsáid as an tréith seo chun aicearraí breise a sholáthar d’úsáideoirí chun nascleanúint a dhéanamh go díreach chuig an eilimint infhillte féin.
Tabhair faoi deara nach gclúdaíonn cur i bhfeidhm reatha Bootstrap na hidirghníomhaíochtaí méarchláir éagsúla a bhfuil cur síos orthu i bpatrún bosca ceoil ARIA Authoring Practices Guide - beidh ort iad seo a chur san áireamh tú féin le JavaScript saincheaptha.
Úsáid
Úsáideann an breiseán collapse roinnt ranganna chun an t-ardú trom a láimhseáil:
.collapse
seithí an t-ábhar.collapse.show
léiríonn an t-ábhar.collapsing
cuirtear leis nuair a thosaíonn an t-aistriú, agus baintear é nuair a chríochnaíonn sé
Is féidir na ranganna seo a fháil i _transitions.scss
.
Trí tréithe sonraí
Ní gá ach cuir data-toggle="collapse"
leis data-target
an eilimint chun rialú a shannadh go huathoibríoch ar eilimint infhillte amháin nó níos mó. Glacann an data-target
tréith le roghnóir CSS chun an cliseadh a chur i bhfeidhm air. Bí cinnte an rang collapse
a chur leis an eilimint infhillte. Más mian leat é a oscailt roimh ré, cuir an rang breise show
.
Chun bainistíocht grúpa cosúil le bosca ceoil a chur le limistéar infhillte, cuir an tréith sonraí data-parent="#selector"
. Déan tagairt don taispeántas chun é seo a fheiceáil i ngníomh.
Trí JavaScript
Cumasaigh de láimh le:
$('.collapse').collapse()
Roghanna
Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-
, mar atá i data-parent=""
.
Ainm | Cineál | Réamhshocrú | Cur síos |
---|---|---|---|
tuismitheoir | roghnóir | réad jQuery | eilimint DOM | bréagach | Má chuirtear tuismitheoir ar fáil, dúnfar na heilimintí in-chomhlaite ar fad faoin tuismitheoir sonraithe nuair a thaispeánfar an mhír infhillte seo. (cosúil le hiompar cairdín traidisiúnta - tá sé seo ag brath ar an card rang). Ní mór an tréith a shocrú ar an limistéar sprice infhillte. |
scoránaigh | Boole | fíor | Scoránaigh an eilimint infhillte ar agairt |
Modhanna
Modhanna agus aistrithe asincrónacha
Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir chomh luath agus a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .
Féach ar ár gcáipéisíocht JavaScript le haghaidh tuilleadh eolais .
.collapse(options)
Gníomhachtaíonn sé d'ábhar mar eilimint infhillte. Glacann rogha roghnach object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Scoránaigh eilimint infhillte a thaispeántar nó folaithe. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an eilimint in-chomhlaite (ie sula dtarlaíonn shown.bs.collapse
nó sula hidden.bs.collapse
dtarlaíonn an teagmhas).
.collapse('show')
Léiríonn eilimint infhillte. Filleann sé ar an nglaoiteoir sula dtaispeántar an eilimint infhillte (ie sula shown.bs.collapse
dtarlaíonn an teagmhas).
.collapse('hide')
Seithí eilimint infhillte. Filleann sé ar an nglaoiteoir sula mbeidh an eilimint in-chomhlaite curtha i bhfolach (ie sula hidden.bs.collapse
dtarlaíonn an teagmhas).
.collapse('dispose')
Scriosann titim eilimint.
Imeachtaí
Nochtann rang titim Bootstrap roinnt imeachtaí chun dul i ngleic leis an bhfeidhmiúlacht leite.
Cineál Imeachta | Cur síos |
---|---|
taispeáin.bs.leac | Téann an teagmhas seo chun solais láithreach nuair show a ghlaoitear an modh ásc. |
léirithe.bs | Cuirtear an teagmhas seo ar ceal nuair a bhíonn eilimint chlaonta curtha infheicthe don úsáideoir (fanfaidh sé go mbeidh aistrithe CSS le cur i gcrích). |
folaigh.bs.leac | Cuirtear an teagmhas seo ar ceal láithreach nuair hide a glaodh ar an modh. |
i bhfolach.bs.tuilleamaí | Tá an teagmhas seo bréan nuair a bhíonn eilimint tite i bhfolach ón úsáideoir (fanfaidh sé go mbeidh aistrithe CSS le cur i gcrích). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})