Tuitidh

Mar a tha e ag obair

Tha am plugan tuiteam JavaScript air a chleachdadh gus susbaint a shealltainn agus fhalach. Bithear a’ cleachdadh putanan no acraichean mar luchd-brosnachaidh a tha air am mapadh gu eileamaidean sònraichte a thogas tu. Le bhith a’ tuiteam às eileamaid beothaichidh heighte an luach làithreach gu 0. Leis mar a làimhsicheas CSS beòthachaidhean, chan urrainn dhut a chleachdadh paddingair .collapseeileamaid. An àite sin, cleachd an clas mar eileamaid còmhdaich neo-eisimeileach.

eisimpleir

Cliog air na putanan gu h-ìosal gus eileamaid eile a shealltainn agus fhalach tro atharrachaidhean clas:

• .collapsea’ falach susbaint
• .collapsingair a chur an sàs rè eadar-ghluasadan
• .collapse.showa’ nochdadh susbaint

San fharsaingeachd, tha sinn a 'moladh a bhith a' cleachdadh putan leis a ' data-bs-targetghnè. Ged nach eilear ga mholadh bho shealladh semantach, faodaidh tu cuideachd ceangal a chleachdadh leis a’ hreffheart (agus a role="button"). Anns an dà chùis, tha data-bs-toggle="collapse"e riatanach.

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

Ioma targaidean

Faodaidh A <button>no <a>grunn eileamaidean a shealltainn agus fhalach le bhith a’ toirt iomradh orra le roghnaiche na fheart hrefno na data-bs-targetfheart. Iomadaich <button>no <a>faodaidh iad eileamaid a shealltainn agus fhalach ma tha iad uile a’ toirt iomradh air leis a’ hrefbhuadhan data-bs-targetaca

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

Ruigsinneachd

Dèan cinnteach gun cuir thu ris aria-expandedan eileamaid smachd. Tha am feart seo gu soilleir a’ toirt iomradh air staid làithreach na h-eileamaid tuiteamach ceangailte ri smachd leughadairean sgrion agus teicneòlasan taice coltach ris. Ma tha an eileamaid collapsible dùinte gu bunaiteach, bu chòir luach aria-expanded="false". Ma tha thu air an eileamaid tuiteamach a shuidheachadh gus a bhith fosgailte gu bunaiteach a’ cleachdadh a’ showchlas, cuir aria-expanded="true"air an smachd an àite sin. Togaidh am plugan am feart seo gu fèin-ghluasadach air an smachd stèidhichte air co-dhiù an deach an eileamaid tuiteamach fhosgladh no a dhùnadh (tro JavaScript, no leis gu bheil an neach-cleachdaidh air eileamaid smachd eile a bhrosnachadh cuideachd ceangailte ris an aon eileamaid a ghabhas tuiteam). Mura h-eil putan HTML an eileamaid smachd (me, an <a>no <div>), am feartrole="button"bu chòir a chur ris an eileamaid.

Ma tha an eileamaid smachd agad ag amas air aon eileamaid a ghabhas tuiteam - is e sin am data-bs-targetfeart a’ comharrachadh idroghnaiche - bu chòir dhut am aria-controlsfeart a chuir ris an eileamaid smachd, anns a bheil an ideileamaid a ghabhas tuiteam. Bidh leughadairean sgrion ùr-nodha agus teicneòlasan taice coltach ris a’ cleachdadh a’ fheart seo gus geàrr-liostaichean a bharrachd a thoirt do luchd-cleachdaidh gus seòladh gu dìreach chun eileamaid tuiteamach fhèin.

Thoir an aire nach eil buileachadh gnàthach Bootstrap a’ còmhdach na diofar eadar-obrachaidhean meur-chlàr roghainneil a tha air am mìneachadh ann am pàtran bogsa 1.1 Cleachdaidhean Ùghdarrachaidh WAI-ARIA - feumaidh tu iad sin a thoirt a-steach le JavaScript àbhaisteach.

Sass

Caochlaidhean

$transition-collapse:         height .35s ease;

Clasaichean

Gheibhear clasaichean gluasaid scss/_transitions.scsstuiteamach oir tha iad sin air an roinn thairis air grunn phàirtean (tuiteam agus bogsa).

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

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

Cleachdadh

Bidh am plugan tuiteam a’ cleachdadh beagan chlasaichean gus an togail trom a làimhseachadh:

• .collapsea’ falach an t-susbaint
• .collapse.showa’ nochdadh an t-susbaint
• .collapsingair a chur ris nuair a thòisicheas an gluasad, agus air a thoirt air falbh nuair a bhios e deiseil

Gheibhear na clasaichean seo ann an _transitions.scss.

Tro fheartan dàta

Dìreach cuir ris data-bs-toggle="collapse"agus a data-bs-targetris an eileamaid gus smachd a shònrachadh gu fèin-ghluasadach air aon no barrachd eileamaidean a ghabhas tuiteam. Gabhaidh am data-bs-targetfeart ri roghnaichear CSS gus an tuiteam a chuir an sàs. Dèan cinnteach gun cuir thu an clas collapseris an eileamaid a ghabhas tuiteam. Ma tha thu airson gum fosgail e gu bunaiteach, cuir ris a’ chlas show.

Gus riaghladh buidhne coltach ri bogsa a chuir ri raon a ghabhas tuiteam, cuir am feart dàta data-bs-parent="#selector". Thoir sùil air an demo gus seo fhaicinn ann an gnìomh.

Air sgàth javascript

Dèan comas le làimh le:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-bs-, mar ann an data-bs-parent="".

Dòighean-obrach

Cuir an susbaint agad an gnìomh mar eileamaid a ghabhas tuiteam. A 'gabhail ri roghainnean roghnach object.

Faodaidh tu eisimpleir tuiteam a chruthachadh leis an neach-togail, mar eisimpleir:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

Tachartasan

Bidh clas tuiteam Bootstrap a’ nochdadh grunn thachartasan airson a dhol an sàs ann an gnìomhachd tuiteam.

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})