Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
in English

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 heightluach reatha go 0. Mar gheall ar an gcaoi a láimhseálann CSS beochan, ní féidir leat é a úsáid paddingar .collapseeilimint. Ina áit sin, bain úsáid as an rang mar eilimint timfhilleadh neamhspleách.

Tá éifeacht beochana an chomhpháirt seo ag brath ar prefers-reduced-motioncheist 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:

  • .collapseseithí ábhar
  • .collapsinga chuirtear i bhfeidhm le linn aistrithe
  • .collapse.showléiríonn ábhar

Go ginearálta, molaimid úsáid a bhaint as cnaipe leis an data-bs-targettréith. Cé nach moltar é ó thaobh séimeantach de, is féidir leat nasc a úsáid leis an hreftréith (agus a role="button"). Sa dá chás, data-bs-toggle="collapse"tá an gá.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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>

Spriocanna iolracha

A <button>nó is féidir leis ileilimintí a thaispeáint agus a cheilt trí thagairt a dhéanamh <a>dóibh le roghnóir ina shaintréith. Iolrú nó is féidir dúil a thaispeáint agus a cheilt má thagraíonn siad dó lena n - airíonnahrefdata-bs-target<button><a>hrefdata-bs-target

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.
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.
<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>

Inrochtaineacht

Bí cinnte a chur aria-expandedleis 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 showrang, 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><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-bs-targetaitreabúid dírithe ar idroghnóir – ba cheart duit an aria-controlsaitreabúid a chur leis an eilimint rialaithe, ina bhfuil an ideilimint 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 roghnacha éagsúla a bhfuil cur síos orthu i bpatrún bosca ceoil WAI-ARIA Authoring Practices 1.1 - beidh ort iad seo a chur san áireamh tú féin le JavaScript saincheaptha.

Sass

Athróga

$transition-collapse:         height .35s ease;

Ranganna

Is féidir ranganna trasdula laghdaithe a fháil scss/_transitions.scssmar go roinntear iad seo thar ilchodanna (titim agus bosca ceoil).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

Úsáid

Úsáideann an breiseán collapse roinnt ranganna chun an t-ardú trom a láimhseáil:

  • .collapseseithí an t-ábhar
  • .collapse.showléiríonn an t-ábhar
  • .collapsingcuirtear 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-bs-toggle="collapse"leis data-bs-targetan eilimint chun rialú a shannadh go huathoibríoch ar eilimint infhillte amháin nó níos mó. Glacann an data-bs-targettréith le roghnóir CSS chun an cliseadh a chur i bhfeidhm air. Bí cinnte an rang collapsea 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-bs-parent="#selector". Déan tagairt don taispeántas chun é seo a fheiceáil i ngníomh.

Trí JavaScript

Cumasaigh de láimh le:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

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-bs-, mar atá i data-bs-parent="".

Ainm Cineál Réamhshocrú Cur síos
parent roghnóir | réad jQuery | eilimint DOM false 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 cardrang). Ní mór an tréith a shocrú ar an limistéar sprice infhillte.
toggle Boole true 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 .

Gníomhachtaíonn sé d'ábhar mar eilimint infhillte. Glacann rogha roghnach object.

Is féidir leat sampla titim a chruthú leis an cruthaitheoir, mar shampla:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Modh Cur síos
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.collapsenó sula hidden.bs.collapsedtarlaíonn an teagmhas).
show Léiríonn eilimint infhillte. Filleann sé ar an nglaoiteoir sula dtaispeántar an eilimint infhillte (eg, sula shown.bs.collapsedtarlaíonn an teagmhas).
hide Seithí eilimint infhillte. Filleann sé ar an nglaoiteoir sula mbeidh an eilimint in-chomhlaite curtha i bhfolach (eg, sula hidden.bs.collapsedtarlaíonn an teagmhas).
dispose Scriosann titim eilimint. (Baintear sonraí stóráilte ar an eilimint DOM)
getInstance Modh statach a ligeann duit an t-ásc caolaithe a bhaineann le heilimint DOM a fháil, is féidir leat é a úsáid mar seo:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Modh statach a thugann ar ais ásc titime a bhaineann le heilimint DOM nó a chruthaíonn ceann nua ar eagla nach gcuirfí inisealaithe é. Is féidir leat é a úsáid mar seo:bootstrap.Collapse.getOrCreateInstance(element)

Imeachtaí

Nochtann rang titim Bootstrap roinnt imeachtaí chun dul i ngleic leis an bhfeidhmiúlacht leite.

Cineál imeachta Cur síos
show.bs.collapse Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc.
shown.bs.collapse 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).
hide.bs.collapse Cuirtear an teagmhas seo ar ceal láithreach nuair hidea glaodh ar an modh.
hidden.bs.collapse 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).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})