Ijaarsi kufuu

Akkaataa itti hojjetu

Ijaarsi JaavaScript kufaa qabiyyee agarsiisuu fi dhoksuuf fayyadama. Qabduu ykn ankuroonni akka kaka'umsaa kanneen elementoota murtaa'oo ati jijjiirtutti kaartaa ta'anitti fayyadamu. Elementii tokko kuffisuun heightgatii isaa ammaa irraa gara 0. Akkaataa CSS sochiiwwan itti qabatu kennameef, elementii paddingirratti fayyadamuu hin dandeessu . .collapseInumaayyuu, gita akka qaama marfata of danda'etti fayyadami.

Fakkeenya

Qaaqa biraa karaa jijjiirama gitaa agarsiisuu fi dhoksuuf qareewwan armaan gadii cuqaasi:

• .collapseqabiyyee dhoksa
• .collapsingyeroo ce’umsaa hojiirra oola
• .collapse.showqabiyyee agarsiisa

data-bs-targetWalumaagalatti, qaree amaloota qabu fayyadamuu ni gorsina . Ija hiikaatiin kan hin gorfamin yoo ta'ellee, walqabsiisa hrefamalli (fi a role="button") waliin fayyadamuu dandeessa. Haala lamaan keessatti, the data-bs-toggle="collapse"ni barbaachisa.

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

Dalga-galii

Ijaarsi kufaatii akkasumas kufaatii qajeelaa ni deeggara. Bakka .collapse-horizontalkan ce'uuf gita fooyyessaa dabali fi a qaama mucaa battalaa irratti saagi . Sass amala mataa keetii barreessuudhaaf, akkaataa sarara keessaa fayyadamuuf, ykn faayidaa bal'ina keenya fayyadamuuf bilisa ta'i .widthheightwidth

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

Target dachaa

A <button>ykn <a>elementoota hedduu agarsiisuu fi dhoksuu danda'a, isaanis filannoodhaan amaloota isaa hrefykn data-bs-targetamaloota isaa keessatti wabeeffachuun. Dachaa <button>ykn <a>elementii agarsiisuu fi dhoksuu danda'u yoo tokkoon tokkoon isaanii amaloota isaanii hrefykn waliin wabeeffatandata-bs-target

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

Dhaqqabummaa

aria-expandedQaama too'annoo irratti dabaluu kee mirkaneessi . Amalli kun haala ammaa elementii kufaatii to'annootti hidhamee dubbistoota iskiriinii fi teeknooloojiiwwan gargaarsaa walfakkaatan ifatti dabarsa. Yoo qaamni cufamuu danda'u durtiidhaan cufame, amalli qaama too'annoo irratti gatii aria-expanded="false". Yoo qaama kuffamuu danda'u akka durtii showgita fayyadamuun banamu saagde, aria-expanded="true"bakka isaa too'annoo irratti saagi. Ijaarsiin ofumaan amalli kana too'annoo irratti qaamni kuffamuu danda'u banamuu ykn cufamuu dhabuu irratti hundaa'uun ni jijjiira (karaa JaavaScript, ykn sababni isaas fayyadamaan qaama too'annoo biraa qaama kuffamuu danda'u walfakkaataa waliin hidhame waan kakaasef). Yoo qaamni HTML qaama too'annoo qaree hin taane (fkn, an <a>ykn <div>), amallirole="button"elementii irratti dabalamuu qaba.

Yoo qaamni too'annoo kee qaama cufamuu danda'u tokko irratti xiyyeeffate – jechuunis data-bs-targetamalli gara filannootti agarsiisaa jira ta'e – amalli qaama too'annootti iddabaluu qabda , kan qaama kuffamuu danda'u of keessaa qaba. Dubbistoonni iskiriinii ammayyaa fi teeknooloojiiwwan gargaarsaa walfakkaatan amaloota kana fayyadamuun fayyadamtootaaf karaa gabaabaa dabalataa kallattiin gara elementii kufaatii mataa isaatti akka qajeelan ni kennu.aria-controlsid

Hubadhu hojiirra oolmaan Bootstrap ammaa walqunnamtii furtuu filannoo adda addaa kanneen Qajeelfama Shaakala Barreessuu ARIA keessatti ibsaman akka hin uwwisu hubadhu - kanneen ofii keetii JaavaScript amala waliin hammachuu si barbaachisa.

Sass jedhama

Jijjiiramoota

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

Daree barnootaa

Gitoota ce'umsaa kufaatii keessatti argamuu danda'u scss/_transitions.scsssababiin isaas isaan kun qaamolee hedduu (kufaatii fi akkoordiyoonii) keessatti qooddataniiru.

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

Fayyadama

Ijaarsiin kufaatii gita muraasa fayyadama kaasuun ulfaataa to'achuuf:

• .collapseqabiyyee dhoksa
• .collapse.showqabiyyee agarsiisa
• .collapsingyeroo ce'umsi jalqabu dabalama, yeroo xumuramu immoo ni haqama

Kutaawwan kunniin _transitions.scss.

Karaa amaloota deetaa

Too'annoo elementoota tokkoo fi isaa ol ofumaan ramaduuf elementicha irratti data-bs-toggle="collapse"fi a qofa dabaluu qofa . data-bs-targetAmalli data-bs-targetfilannoo CSS kufaatii itti hojii irra oolchuuf fudhata. collapseGitaa gara qaama cufamuu danda'utti dabaluu kee mirkaneessi . Yoo durtii akka banamu barbaadde, gita dabalataa dabali show.

Bulchiinsa garee akka akkoordiyoonii gara naannoo cufamuu danda'utti dabaluuf, amalli deetaa dabali data-bs-parent="#selector". Odeeffannoo dabalataaf fuula accordion ilaali .

Karaa JaavaScript

Harkaan dandeessisi:

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

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu waan danda'uuf, maqaa filannoo gara data-bs-, akka keessatti dabaluu dandeessa data-bs-animation="{value}". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo “ camelCase ” irraa gara “ kebab-case ” jijjiiruu kee mirkaneessi. Fakkeenyaaf, data-bs-custom-class="beautifier"bakka data-bs-customClass="beautifier".

Bootstrap 5.2.0 irraa eegalee, qaamolee hundi amaloota deetaa yaaliidata-bs-config eegame kan qindeessaa qaama salphaa akka tarree JSON qabachuu danda'u deeggaru. Yeroo qaamni tokko amaloota data-bs-config='{"delay":0, "title":123}'fi qabu data-bs-title="456", gatii dhumaa titleta'a 456fi amaloonni deetaa adda addaa gatiiwwan irratti kennaman irra darbu data-bs-config. Dabalataan, amaloonni deetaa jiran gatiiwwan JSON akka data-bs-delay='{"show":0,"hide":150}'.

Malawwan

Qabiyyee kee akka qaama cufamuu danda'utti hojii irra oolcha. Filannoo filannoo tokko fudhata object.

Ijaarsa waliin fakkeenya kufaatii uumuu dandeessa, fakkeenyaaf:

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

Taateewwan

Gitni kufaatii Bootstrap taateewwan muraasa gara dalagaa kufaatiitti hooking gochuuf saaxila.

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