Mafere na isi ọdịnaya Gaa na ntugharị docs

Jiri klaasị ole na ole na plugins JavaScript were tụgharịa visibiliti ọdịnaya n'ofe ọrụ gị.

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.

Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụjụ mgbasa ozi. Hụ akụkụ ngagharị ewelatala nke akwụkwọ nnweta anyị .

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

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>

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

Biko mara na ọ bụ ezie na ihe atụ dị n'okpuru nwere min-heightsetịpụrụ iji zere imegharị oke na doc anyị, nke a abụghị ihe achọrọ n'ụzọ doro anya. Naanị ihe widthdị na ihe ụmụaka chọrọ.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<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

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>

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 WAI-ARIA Authoring Practices 1.1 ụkpụrụ - ị 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:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-bs-, dị ka ọ dị na data-bs-parent="".

Aha Ụdị Ọdabara Nkọwa
parent onye nhọpụta | ihe jQuery | DOM element false Ọ bụrụ na enyere nne na nna, mgbe ahụ, ihe niile ga-adakpọ n'okpuru nne na nna akọwapụtara ga-emechi mgbe egosiri ihe a nwere ike ịdaba. (dị ka omume accordion ọdịnala - nke a dabere na cardklaasị). Ekwesịrị ịtọ njiri mara na mpaghara ebe a ga-akụda.
toggle boolean true Na-atụgharị ihe nwere ike ịdaba na oku

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọ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ụ:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Usoro Nkọwa
toggle Na-atụgharị ihe nwere ike ịdaba ka egosiri ma ọ bụ zoo. Na-alaghachikwute onye na-akpọ oku tupu egosiri ma ọ bụ zoo ihe nwere ike ịdaba (ya bụ tupu ihe omume shown.bs.collapsema ọ bụ hidden.bs.collapseemee).
show Na-egosi mmewere nwere ike ịdaba. Na-alaghachikwute onye na-akpọ oku tupu egosiri mmewere nwere ike ịdaba (dịka ọmụmaatụ, tupu shown.bs.collapsemmemme emee).
hide Na-ezobe mmewere nwere ike ịdaba. Na-alaghachikwute onye na-akpọ oku tupu ezobela ihe nwere ike ịdaba (dịka ọmụmaatụ, tupu ihe hidden.bs.collapseomume emee).
dispose Na-ebibi ndakpọ mmewere. (Na-ewepụ data echekwara na mmewere DOM)
getInstance Usoro static nke na-enye gị ohere ịnweta ndakpọ ndakpọ jikọtara na ihe DOM, ị nwere ike iji ya dị ka nke a:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Usoro kwụ ọtọ nke na-eweghachi ndakpọ ndakpọ jikọtara na mmewere DOM ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidobeghị ya. Ị nwere ike iji ya dị ka nke a:bootstrap.Collapse.getOrCreateInstance(element)

Ihe omume

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

Ụdị mmemme Nkọwa
show.bs.collapse Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
shown.bs.collapse A na-agbanyụ mmemme a mgbe onye ọrụ mere ka ihe ndakpọ pụtara (ga-echere mgbanwe CSS ka agwụchaa).
hide.bs.collapse A na-agbapụ ihe omume a ozugbo mgbe hidea na-akpọ usoro ahụ.
hidden.bs.collapse A na-agbapụ mmemme a mgbe ezoro ezoro onye ọrụ ihe ndakpọ (ga-echere mgbanwe CSS ka agwụchaa).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})