Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
in English

Rushewa

Canja hangen nesa na abun ciki a cikin aikinku tare da ƴan azuzuwan da kuma abubuwan mu na JavaScript.

Yadda yake aiki

Ana amfani da rugujewar kayan aikin JavaScript don nunawa da ɓoye abun ciki. Ana amfani da maɓallai ko anka a matsayin masu jawo waɗanda aka tsara zuwa takamaiman abubuwan da kuke juyawa. Rushe wani kashi zai raya heightdaga darajarsa na yanzu zuwa 0. Ganin yadda CSS ke sarrafa rayarwa, ba za ku iya amfani paddingda wani .collapseabu ba. Madadin haka, yi amfani da ajin azaman abin rufewa mai zaman kansa.

Tasirin raye-rayen wannan bangaren ya dogara ne da prefers-reduced-motiontambayar kafofin watsa labarai. Dubi raguwar sashin motsi na takaddun damar mu .

Misali

Danna maɓallan da ke ƙasa don nunawa da ɓoye wani abu ta canje-canjen aji:

  • .collapseboye abun ciki
  • .collapsingana amfani dashi a lokacin sauyawa
  • .collapse.showyana nuna abun ciki

Gabaɗaya, muna ba da shawarar amfani da maɓalli tare da data-bs-targetsifa. Duk da yake ba a ba da shawarar ta hanyar mahangar ilimin tauhidi ba, kuna iya amfani da hanyar haɗi tare da hrefsifa (da a role="button"). A cikin duka biyun, data-bs-toggle="collapse"ana buƙatar.

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>

Makasudi da yawa

A <button>ko <a>yana iya nunawa da ɓoye abubuwa da yawa ta hanyar tura su tare da mai zaɓa a cikin sa hrefko data-bs-targetsifa. Maɗaukaki <button>ko <a>suna iya nunawa da ɓoye wani kashi idan kowannensu ya yi nuni da shi da nasu hrefko data-bs-targetsifa

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>

Dama

Tabbatar ƙara aria-expandedzuwa sashin sarrafawa. Wannan sifa tana bayyana a sarari halin da ake ciki na ɓangaren ruɗewa wanda ke daura da sarrafawa zuwa masu karanta allo da makamantan fasahar taimako. Idan an rufe kashi mai yuwuwa ta tsohuwa, sifa a kan sashin sarrafawa yakamata ya sami darajar aria-expanded="false". Idan kun saita abin da zai iya rushewa don buɗewa ta tsohuwa ta amfani da showajin, saita aria-expanded="true"kan sarrafawa maimakon. Plugin za ta kunna wannan sifa ta atomatik akan sarrafawa bisa ko an buɗe ko a'a abin da zai iya rushewa ko a'a an buɗe ko a'a (ta hanyar JavaScript, ko kuma saboda mai amfani ya haifar da wani ɓangaren sarrafawa shima an ɗaure shi da kashi ɗaya mai yuwuwa). Idan abin sarrafawa na HTML ba maɓalli bane (misali, wani <a>ko <div>), sifarole="button"ya kamata a kara zuwa kashi.

Idan sashin sarrafa ku yana yin niyya ne guda ɗaya mai yuwuwa - watau data-bs-targetsifa tana nuna mai idzaɓi - yakamata ku ƙara aria-controlssifa zuwa sashin sarrafawa, wanda ke ɗauke da idkashi mai yuwuwa. Masu karanta allo na zamani da makamantan fasahar taimako suna amfani da wannan sifa don samarwa masu amfani ƙarin gajerun hanyoyi don kewaya kai tsaye zuwa ɓangaren da zai iya rugujewa kansa.

Lura cewa aiwatar da Bootstrap na yanzu baya rufe nau'ikan hulɗar maɓalli na zaɓi daban-daban da aka kwatanta a cikin Tsarin Mawallafi na WAI-ARIA 1.1 - kuna buƙatar haɗa waɗannan da kanku tare da JavaScript na al'ada.

Sass

Masu canji

$transition-collapse:         height .35s ease;

Darasi

Za a iya samun azuzuwan miƙa mulki a cikin scss/_transitions.scssrugujewar kamar yadda ake raba waɗannan a cikin sassa da yawa (rushewa da haɗin gwiwa).

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

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

Amfani

Fasinjojin rushewa yana amfani da ƴan azuzuwan don ɗaukar nauyi mai nauyi:

  • .collapseboye abun ciki
  • .collapse.showyana nuna abun ciki
  • .collapsingana ƙara lokacin da aka fara canji, kuma a cire idan ya ƙare

Ana iya samun waɗannan azuzuwan a _transitions.scss.

Ta hanyar bayanan halayen

Kawai ƙara data-bs-toggle="collapse"da data-bs-targeta cikin kashi don ba da iko ta atomatik ɗaya ko fiye abubuwan da za su iya rushewa. Siffar data-bs-targettana karɓar mai zaɓin CSS don amfani da rushewar zuwa. Tabbatar ƙara ajin collapsezuwa kashi mai rugujewa. Idan kuna son buɗewa ta tsohuwa, ƙara ƙarin ajin show.

Don ƙara gudanarwar rukuni-kamar accordion zuwa yanki mai yuwuwa, ƙara sifa na bayanai data-bs-parent="#selector". Koma zuwa demo don ganin wannan a aikace.

Ta hanyar JavaScript

Kunna da hannu tare da:

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

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-bs-, kamar a cikin data-bs-parent="".

Suna Nau'in Default Bayani
parent mai za6i | jQuery abu | DOM element false Idan an ba da iyaye, to duk abubuwan da za su iya haɗuwa a ƙarƙashin ƙayyadadden iyaye za a rufe su lokacin da aka nuna wannan abu mai yuwuwa. (mai kama da al'adun gargajiya na gargajiya - wannan ya dogara da cardaji). Dole ne a saita sifa akan wurin da ake iya rugujewa.
toggle boolean true Yana kunna abin da zai iya rushewa akan kira

Hanyoyin

Hanyoyi masu daidaitawa da canji

Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .

Duba takaddun JavaScript ɗin mu don ƙarin bayani .

Yana kunna abun cikin ku azaman abun da zai iya rugujewa. Yana yarda da zaɓin zaɓi object.

Kuna iya ƙirƙirar misalin rushewa tare da mai gini, misali:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Hanya Bayani
toggle Yana juya wani abu mai rugujewa zuwa nunawa ko ɓoye. Komawa ga mai kira kafin a nuna abin da zai iya rugujewa a zahiri ko a ɓoye (watau kafin abin shown.bs.collapseko hidden.bs.collapseya faru).
show Yana nuna kashi mai rugujewa. Komawa ga mai kira kafin a nuna ainihin abin da zai iya rushewa (misali, kafin shown.bs.collapseabin ya faru).
hide Yana ɓoye wani abu mai rugujewa. Komawa ga mai kira kafin abin da zai iya rugujewa ya kasance a ɓoye (misali, kafin hidden.bs.collapseabin ya faru).
dispose Yana lalata rugujewar wani abu. (Yana cire bayanan da aka adana akan ɓangaren DOM)
getInstance Hanyar da ta dace wacce ke ba ku damar samun misalin rugujewar da ke da alaƙa da abin DOM, zaku iya amfani da shi kamar haka:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Hanya madaidaiciya wacce ke dawo da misalin rugujewa mai alaƙa da abun DOM ko ƙirƙirar sabo idan ba a fara shi ba. Kuna iya amfani da shi kamar haka:bootstrap.Collapse.getOrCreateInstance(element)

Abubuwan da suka faru

Ajin rushewar Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan rugujewa.

Nau'in taron Bayani
show.bs.collapse Wannan taron yana gobara nan da nan lokacin da showaka kira hanyar misali.
shown.bs.collapse Ana korar wannan taron lokacin da aka bayyana ɓangaren rugujewa ga mai amfani (zai jira canjin CSS ya kammala).
hide.bs.collapse Ana korar wannan taron nan da nan lokacin da hideaka kira hanyar.
hidden.bs.collapse Ana kora wannan taron lokacin da aka ɓoye ɓoyayyiyar ɓarna daga mai amfani (zai jira canjin CSS ya kammala).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})