Ijaarsi kufuu

Akkaataa itti hojjetu

Ijaarsi JaavaScript kufaatii 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 marfama 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

Ijaarsiin 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 cufamuu danda'u akka durtii showgita fayyadamuun banaa 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 kuffamuu 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 ofii isaatii akka qajeelan ni kennu.aria-controlsid

Hubadhu hojiirra oolmaan Bootstrap ammaa walqunnamtii furtuu filannoo adda addaa kanneen shaakala akkoordiyoonii WAI-ARIA Shaakala Barreessuu 1.1 keessatti ibsaman hin uwwisu - kana ofuma 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

To'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 akkoordiyoon fakkaatu gara naannoo cufamuu danda'utti dabaluuf, amalli deetaa dabali data-bs-parent="#selector". Odeeffannoo dabalataaf fuula accordion ilaalaa .

Karaa JaavaScript

Harkaan dandeessisi:

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

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-bs-, akkuma keessatti dabali data-bs-parent="".

Malawwan

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

Ijaarsa waliin fakkeenya kufaatii uumuu dandeessa, fakkeenyaaf:

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

Taateewwan

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

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