Rushewa

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.

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.

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

A kwance

Fasinjojin rushewa kuma yana goyan bayan rushewar a kwance. Ƙara .collapse-horizontalajin gyare-gyare don canja wurin widthmaimakon heightkuma saita a widthkan abin da ke nan kusa. Jin kyauta don rubuta Sass na al'ada, amfani da salon layi, ko amfani da kayan aikin mu mai faɗi .

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

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

<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 ARIA na Jagorar Ayyukan Mawallafi - kuna buƙatar haɗa waɗannan da kanku tare da JavaScript na al'ada.

Sass

Masu canji

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .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);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

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 shafin accordion don ƙarin bayani.

Ta hanyar JavaScript

Kunna da hannu tare da:

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

Zabuka

Kamar yadda za a iya wuce zaɓuɓɓuka ta hanyar sifofin bayanai ko JavaScript, zaku iya ƙara sunan zaɓi zuwa data-bs-, kamar a cikin data-bs-animation="{value}". Tabbatar canza nau'in shari'ar sunan zaɓi daga " CamelCase " zuwa " kebab-case " lokacin ƙaddamar da zaɓuɓɓuka ta hanyar halayen bayanai. Misali, amfani data-bs-custom-class="beautifier"maimakon data-bs-customClass="beautifier".

Dangane da Bootstrap 5.2.0, duk abubuwan da aka gyara suna goyan bayan sifa da aka keɓance na gwajidata-bs-config wanda zai iya daidaita tsarin sassa mai sauƙi azaman kirtani JSON. Lokacin da kashi yana data-bs-config='{"delay":0, "title":123}'da data-bs-title="456"sifofi, titleƙimar ƙarshe za ta kasance 456kuma keɓantattun halayen bayanan za su soke ƙimar da aka bayar akan data-bs-config. Bugu da ƙari, halayen bayanan da ke akwai suna iya ɗaukar ƙimar JSON kamar data-bs-delay='{"show":0,"hide":150}'.

Hanyoyin

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:

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

Abubuwan da suka faru

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

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