daa

Ka o si arụ ọrụ

A na-eji ngwa mgbakwunye Javascript daa iji gosi na zoo ọdịnaya. A na-eji bọtịnụ ma ọ bụ arịlịka dị ka ihe na-akpali akpali nke edobere na ihe ụfọdụ ị na-atụgharị. Ịdakpọ ihe ga-eme ka heighturu ya dị ugbu a gaa 0. Nyere ka CSS si ejikwa animation, ị nweghị ike iji paddingna .collapsemmewere. Kama, jiri klaasị ahụ dị ka ihe mkpuchi nwere onwe.

Ọmụmaatụ

Pịa bọtịnụ dị n'okpuru iji gosi ma zoo ihe ọzọ site na mgbanwe klaasị:

• .collapsena-ezochi ọdịnaya
• .collapsingetinyere n'oge mgbanwe
• .collapse.showna-egosi ọdịnaya

N'ozuzu, anyị na-akwado iji bọtịnụ nwere data-bs-targetnjirimara. Ọ bụ ezie na akwadoghị ya site n'echiche semantic, ị nwekwara ike iji njikọ nwere hrefnjirimara (na a role="button"). N'okwu abụọ a, data-bs-toggle="collapse"achọrọ ya.

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

Kehoraizin

Ngwa mgbakwunye ọdịda na-akwado ndakpọ kehoraizin. Tinye .collapse-horizontalklaasị mgbanwe ka ị gbanwee widthma heighttọọ widthn'ihe gbasara ụmụaka. Enwere onwe gị ide Sass omenala gị, jiri ụdị inline, ma ọ bụ jiri ngwa obosara anyị .

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

Ọtụtụ ebumnuche

A <button>ma ọ bụ <a>nwere ike igosi ma zoo ọtụtụ ihe site na iji onye na-ahọpụta ha tụọ ya hrefma ọ bụ njiri mara ya data-bs-target. Ọtụtụ <button>ma ọ bụ <a>nwee ike igosi ma zoo otu mmewere ma ọ bụrụ na onye ọ bụla n'ime ha na-eji ya hrefma ọ bụ data-bs-targetnjiri mara ya

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

Nnweta

Jide n'aka na ị ga-agbakwunye aria-expandedna ihe njikwa. Njirimara a na-egosi n'ụzọ doro anya ọnọdụ ugbu a nke mmewere nwere ike ịdaba na njikwa na ndị na-agụ ihuenyo yana teknụzụ enyemaka yiri ya. Ọ bụrụ na ejiri ndabara mechie mmewere nwere ike ịdaba, njirimara dị na mmewere njikwa kwesịrị inwe uru nke aria-expanded="false". Ọ bụrụ na ịtọọla mmewere enwere ike imeghe site na ndabara site na iji showklas, tọọ aria-expanded="true"na njikwa kama. Ngwa mgbakwunye ahụ ga-agbanwe àgwà a na-akpaghị aka na njikwa dabere na emeghere ma ọ bụ mechie mmewere nke nwere ike imebi (site na Javascript, ma ọ bụ n'ihi na onye ọrụ kpalitere ihe njikwa ọzọ jikọtara ya na otu mmewere). Ọ bụrụ na ihe HTML nke ihe njikwa ahụ abụghị bọtịnụ (dịka ọmụmaatụ, otu <a>ma ọ bụ <div>), njirimararole="button"kwesịrị ịgbakwunye na mmewere.

Ọ bụrụ na ihe njikwa gị na-ezubere iche maka otu mmewere nwere ike imebi - ya bụ data-bs-targetnjirimara na-atụ aka na onye idnhọpụta - ị ga-agbakwunye aria-controlsnjirimara na mmewere njikwa, nwere ihe nwere idike imebi. Ndị na-agụ ihuenyo ọgbara ọhụrụ na teknụzụ enyemaka ndị yiri ya na-eji njirimara a nye ndị ọrụ ụzọ mkpirisi agbakwunyere iji gaa ozugbo na mmewere nwere ike ịdaba n'onwe ya.

Rịba ama na mmejuputa Bootstrap ugbu a anaghị ekpuchi mmekọrịta dị iche iche nke ahụigodo nhọrọ akọwapụtara na ụkpụrụ ARIA Authoring Practices Guide - ị ga-achọ itinye ndị a n'onwe gị na Javascript omenala.

Sass

Mgbanwe

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Klas

Enwere ike ịhụ klaasị ntughari n'ime scss/_transitions.scsska a na-ekekọrịta ihe ndị a n'ofe ọtụtụ ihe (ọdịda na accordion).

.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);
  }
}

Ojiji

Ngwa mgbakwunye ndakpọ na-eji klaasị ole na ole iji jikwaa ibuli elu:

• .collapsena-ezochi ọdịnaya
• .collapse.showna-egosi ọdịnaya
• .collapsinga na-agbakwụnye mgbe mgbanwe ahụ malitere, ma wepụ ya mgbe ọ gwụchara

Enwere ike ịchọta klas ndị a na _transitions.scss.

Site na njirimara data

Dị nnọọ tinye data-bs-toggle="collapse"na a data-bs-targetna mmewere na-akpaghị aka ikenye akara nke otu ma ọ bụ karịa ihe ndakpọ. Àgwà ahụ data-bs-targetna-anabata onye nhọpụta CSS iji tinye ọdịda ahụ. Jide n'aka na ịtinye klas collapseahụ na mmewere nwere ike ịdaba. Ọ bụrụ na ị ga-achọ ka ọ meghee, tinye klaasị agbakwunyere show.

Ka ịgbakwunye njikwa otu accordion dị ka mpaghara nwere ike imebi, tinye njirimara data data-bs-parent="#selector". Rụtụ aka na ibe accordion maka ozi ndị ọzọ.

Site JavaScript

Jiri aka jiri:

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

Nhọrọ

Dịka enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript, ị nwere ike itinye aha nhọrọ na data-bs-, dịka na data-bs-animation="{value}". Gbaa mbọ hụ na ị gbanwee ụdị ikpe nke aha nhọrọ site na " camelCase " gaa na " kebab-case " mgbe ị na-agafe nhọrọ site na njirimara data. Dịka ọmụmaatụ, jiri data-bs-custom-class="beautifier"kama data-bs-customClass="beautifier".

Dịka nke Bootstrap 5.2.0, akụrụngwa niile na-akwado njirimara data echekwara nnwaledata-bs-config nke nwere ike idobe nhazi akụrụngwa dị mfe dị ka eriri JSON. Mgbe mmewere nwere data-bs-config='{"delay":0, "title":123}'na data-bs-title="456"njiri mara, uru ikpeazụ titlega-abụ 456na njirimara data dị iche ga-ewepụ ụkpụrụ enyere na data-bs-config. Na mgbakwunye, njirimara data dị adị nwere ike idobe ụkpụrụ JSON dịka data-bs-delay='{"show":0,"hide":150}'.

Ụzọ

Na-eme ka ọdịnaya gị rụọ ọrụ ka ihe nwere ike imebi. Nabata nhọrọ nhọrọ object.

Ị nwere ike ịmepụta ndakpọ ndakpọ na onye nrụpụta, dịka ọmụmaatụ:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Ihe omume

Klas ndakpọ Bootstrap na-ekpughe ihe omume ole na ole maka itinye aka n'ọrụ ọdịda.

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