Ka bin

A bɛ baara kɛ cogo min na

JavaScript plugin min bɛ wele ko collapse, o bɛ kɛ ka kɔnɔkow jira ani k’u dogo. Butɔnw walima ankɔriw bɛ Kɛ i n’a fɔ fɛnɲɛnɛmaw minnu bɛ karti Kɛ fɛn kɛrɛnkɛrɛnnenw na i bɛ minnu Toggle. Ni fɛn dɔ binna , o bɛna ɲɛnamaya di ka heightbɔ a nafa la sisan ka se 0. Ni an y’a jateminɛ ko CSS bɛ animationw ɲɛnabɔ cogo min na, i tɛ se ka baara paddingkɛ ni .collapseelement dɔ ye. O nɔ na, ​​baara kɛ ni kalasi ye i n’a fɔ fɛn min bɛ kɛ ka fɛnw siri ɲɔgɔn na.

Misaliya

Butɔn minnu bɛ duguma, olu digi walasa ka fɛn wɛrɛ jira ani k’a dogo kalanso caman yeli fɛ:

• .collapsekɔnɔkow bɛ dogo
• .collapsingbɛ waleya fɛn caman tigɛli waatiw la
• .collapse.showbɛ kɔnɔkow jira

A ka c’a la, an b’a ɲini aw fɛ aw ka baara kɛ ni butɔni ye min bɛ ni fɛn data-bs-targetye. Hali n’a ma Fɔ kɔrɔko siratigɛ la, i bɛ Se fana ka baara Kɛ ni jὲɲɔgɔnya ye ni ‘fɛn hrefye (ani a role="button"). O ko fila bɛɛ la, a data-bs-toggle="collapse"wajibiyalen don.

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

Laɲini caman

A <button>walima <a>bɛ se ka fɛn caman jira ani k’u dogo ni u ɲɛfɔli ye ni sugandilikɛlan ye a hrefwalima a ka data-bs-targetfɛnsɛbɛnni na. Multiple <button>walima <a>bɛ Se ka fɛn dɔ Jira ani k’a dogo n’u kelen-kelen bɛɛ y’a Lajɛ n’u ka hrefwalima data-bs-targetattribut ye

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

Seko ni dɔnko

Aw ye aw jija ka dɔ fara aria-expandeda kunbɛncogo kan. O jogo in bɛ fɛn min bɛ se ka bin, o min sirilen bɛ kunnafoni-di-minɛn na, o cogoya jira k’a jɛya ka ɲɛsin ɛkran kalanbagaw ma ani o ɲɔgɔnna dɛmɛni fɛɛrɛw. Ni fɛn min bɛ se ka da ɲɔgɔn kan, o datugulen don ka kɛɲɛ ni a daminɛ ye, fɛn min bɛ kunnafonisɛbɛn kan, o ka kan ka kɛ ni nafa ye aria-expanded="false". N'i ye 'fɛn min bɛ Se ka Dabɔ, o Dabɔ ka Dabɔ ka Kɛɲɛ ni showkalasi ye, i bɛ Segin aria-expanded="true"'kɔnɔna na o nɔ na. Plugin bɛna o fɛn in Yɛlɛma a yɛrɛma kɔrɔsili kan ka da a kan ni fɛn min bɛ Se ka Dabɔ o dabɔra walima n’a Dabɔra (JavaScript fɛ, walima k’a sababu Kɛ baarakɛla ye kunnafoni-falen-falen wɛrɛ Lawuli fana min sirilen bɛ o fɛn kelen in na). Ni control element ka HTML element tɛ butɔni ye (misali la, an <a>walima <div>), attributrole="button"ka kan ka fara elementi kan.

Ni i ka kunnafoni-falen-falen-yɔrɔ bɛ ka fɛn kelen de Laɲini min bɛ Se ka Dabɔ – o kɔrɔ ye ko data-bs-targetfɛnɲɛnɛma bɛ ka idsugandilikɛla dɔ Jira – i ka kan ka aria-controlsfɛnɲɛnɛma Fàra kunnafoni-falen-falen-yɔrɔ kan, min kɔnɔ fɛn min bɛ idSe ka Dabɔ. Bi ɛkran kalanbagaw ni o ɲɔgɔnna dɛmɛnanw bɛ baara kɛ ni o fɛn in ye walasa ka sira surun wɛrɛw di baarakɛlaw ma walasa u ka se ka taa yɔrɔ la min bɛ se ka dabɔ a yɛrɛ la.

A kɔlɔsi ko Bootstrap ka sisan waleyali tɛ klaviyeti ɲɔgɔndan suguya caman ɲɛfɔ minnu ɲɛfɔlen don WAI-ARIA Authoring Practices 1.1 accordion pattern kɔnɔ - i yɛrɛ bɛna a ɲini ka ninnu don a kɔnɔ ni JavaScript ladamulen ye.

Sass ye

Yɛlɛma-yɛlɛmaw

$transition-collapse:         height .35s ease;

Kalansow

Collapse transition classes bɛ Se ka Sɔrɔ in na scss/_transitions.scssi n’a fɔ ninnu bɛ Jɛ ka Kɛ fɛn caman ye (collapse ani accordéon).

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

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

Baarakɛcogo

Collapse plugin bɛ baara Kɛ ni kala damadɔ ye walasa ka girinmanw kɔrɔtacogo ɲɛnabɔ:

• .collapsebɛ kɔnɔkow dogo
• .collapse.showbɛ kɔnɔkow jira
• .collapsingbɛ fara a kan ni tɛmɛsira daminɛna, ka bɔ ni a banna

O kalanw bɛ se ka sɔrɔ _transitions.scss.

Donanw ka fɛnɲɛnɛmaw fɛ

Dɔrɔn ka fara data-bs-toggle="collapse"ani a data-bs-targetkan fɛn in na walasa ka fɛn kelen walima fɛn caman minnu bɛ se ka da ɲɔgɔn kan, olu ka kɔrɔsili di otomatiki la. Attribut data-bs-targetbɛ sɔn CSS sugandili ma walasa ka collapse (dakun) in waleya. Aw ye aw jija ka kalasi fara fɛn dɔ kan min bɛ collapsese ka wuli. N'i b'a fɛ a ka da wuli, i ka kalansen wɛrɛ fara a kan show.

Walasa ka kulu ɲɛnabɔli min bɛ i n’a fɔ accordion fara a kan yɔrɔ la min bɛ se ka da, i ka data attribute fara a kan data-bs-parent="#selector". Aw ye demo lajɛ walasa ka nin ye wale la.

JavaScript fɛ

A bɛ se ka baara kɛ ni bolo ye ni:

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

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-parent="".

Fɛɛrɛw

A bɛ i ka kɔnɔkow baara i n’a fɔ fɛn min bɛ se ka da ɲɔgɔn kan. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.

Aw bɛ se ka collapse instance dɔ Dabɔ ni constructeur ye, misali la:

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

Ko minnu kɛra

Bootstrap ka collapse class bɛ ko damadɔw bɔ kɛnɛ kan ka ɲɛsin hooking into collapse functionality ma.

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