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>

Cothromach

Bidh am plugan tuiteam cuideachd a’ toirt taic do bhith a’ tuiteam gu còmhnard. Cuir ris a’ .collapse-horizontalchlas mion-atharrachaidh gus an gluasad an widthàite heightagus suidhich widthair an eileamaid leanabh sa bhad. Faodaidh tu an Sass àbhaisteach agad fhèin a sgrìobhadh, stoidhlichean in-loidhne a chleachdadh, no na goireasan leud againn a chleachdadh .

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </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 Stiùireadh Cleachdaidhean Ùghdarrachaidh ARIA - feumaidh tu iad sin a thoirt a-steach le JavaScript àbhaisteach.

Sass

Caochlaidhean

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .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);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

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 duilleag a’ bhocsa airson tuilleadh fiosrachaidh.

Air sgàth javascript

Dèan comas le làimh le:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Roghainnean

Leis gum faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript, faodaidh tu ainm roghainn a chuir ri data-bs-, mar ann an data-bs-animation="{value}". Dèan cinnteach gun atharraich thu seòrsa cùis an ainm roghainn bho “ camelCase ” gu “ kebab-case ” nuair a thèid thu seachad air na roghainnean tro bhuadhan dàta. Mar eisimpleir, cleachd data-bs-custom-class="beautifier"an àite data-bs-customClass="beautifier".

Mar Bootstrap 5.2.0, tha na pàirtean uile a’ toirt taic do fheart dàta glèidhte deuchainneachdata-bs-config a dh’ fhaodas rèiteachadh phàirtean sìmplidh a chumail mar shreang JSON. Nuair a tha data-bs-config='{"delay":0, "title":123}'agus data-bs-title="456"buadhan aig eileamaid, bidh an titleluach deireannach 456agus bidh na buadhan dàta fa leth a’ dol thairis air na luachan a chaidh a thoirt seachad air data-bs-config. A bharrachd air an sin, tha na feartan dàta a th’ ann mar-thà comasach air luachan JSON mar data-bs-delay='{"show":0,"hide":150}'.

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:

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})