Okuzirika

Engeri gye kikola

Plugin ya JavaScript eya collapse ekozesebwa okulaga n'okukweka ebirimu. Buttons oba anchors zikozesebwa nga triggers eziteekebwa ku maapu ku elements ebitongole by’okyusakyusa. Okumenya elementi kijja kuzza obulamu heightokuva ku muwendo gwayo ogw'akaseera kano okutuuka ku 0. Kubanga CSS gy'ekwatamu ebifaananyi ebirina obulamu, tosobola kukozesa paddingku .collapseelementi. Wabula, kozesa ekibiina nga ekintu ekyetongodde eky’okuzinga.

Eky'okulabirako

Nywa ku buttons wansi okulaga n'okukweka elementi endala ng'oyita mu nkyukakyuka za kiraasi:

• .collapseakweka ebirimu
• .collapsingekozesebwa mu biseera by’enkyukakyuka
• .collapse.showeraga ebirimu

Okutwalira awamu, tusaba okukozesa button eriko data-bs-targetattribute. Wadde nga tekisemba okuva mu ndaba y’amakulu, osobola n’okukozesa enkolagana n’ekintu href(ne a role="button"). Mu mbeera zombi, the data-bs-toggle="collapse"is required.

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

Okwegolola

Plugin y’okugwa era ewagira okugwa okw’okwebungulula. Okwongerako ekibiina .collapse-horizontalky'omukyusa okukyusa the mu widthkifo kya heightera oteeke a widthku elementi y'omwana ey'amangu. Wulira nga oli waddembe okuwandiika Sass yo eya custom, kozesa emisono egy'omu layini, oba kozesa ebikozesebwa byaffe eby'obugazi .

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

Ebigendererwa ebiwerako

A <button>oba <a>asobola okulaga n’okukweka ebintu ebingi ng’abijuliza n’omusunsula mu hrefoba data-bs-targetattribute yaayo. Multiple <button>oba <a>basobola okulaga n’okukweka elementi singa buli omu akijuliza n’ekintu kyabwe hrefoba data-bs-targetattribute

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

Okutuuka ku bantu

Kakasa nti oyongera aria-expandedku kintu ekifuga. Attribute eno etuusa mu bulambulukufu embeera eriwo kati ey’ekintu ekiyinza okugwa ekisibiddwa ku control eri abasomi ba screen ne tekinologiya ayamba afaananako bwetyo. Singa ekintu ekiyinza okugwa kiggalwawo nga bwe kibadde, ekintu ku kintu ekifuga kirina okuba n'omuwendo gwa aria-expanded="false". Bw'oba otaddewo ekintu ekiyinza okugwa okubeera ekiggule nga bwe kibadde ng'okozesa showkiraasi, teeka aria-expanded="true"ku kifuga mu kifo ky'ekyo. Plugin ejja kukyusakyusa ekintu kino ku kifuga okusinziira ku oba oba nedda ekintu ekiyinza okugwa kigguddwawo oba kiggaddwa (nga kiyita mu JavaScript, oba kubanga omukozesa yatandika ekintu ekirala ekifuga nakyo nga kisibiddwa ku kintu kye kimu ekiyinza okugwa). Singa ekintu kya HTML eky'ekintu ekifuga si bbaatuuni (okugeza, an <a>oba <div>), ekinturole="button"erina okugattibwa ku elementi.

Singa ekintu kyo ekifuga kiba kigenderera ekintu kimu ekiyinza okugwa – kwe kugamba data-bs-targetekintu ekiraga ekintu idekisunsuddwa – olina okwongerako aria-controlsekintu ku kintu ekifuga, ekirimu ideky’ekintu ekiyinza okugwa. Ebisoma ku ssirini eby’omulembe ne tekinologiya ow’enjawulo ayambako bakozesa ekintu kino okuwa abakozesa enkola endala ennyimpi okugenda butereevu ku kintu kyennyini ekiyinza okugwa.

Weetegereze nti enkola ya Bootstrap eriwo kati tekwata ku nkolagana za keyboard ez'enjawulo ez'okwesalirawo ezitegeezeddwa mu ARIA Authoring Practices Guide accordion pattern - ojja kwetaaga okussaamu bino ggwe kennyini ne JavaScript eya bulijjo.

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

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

Ebisulo by’abayizi

Ebika by’enkyukakyuka y’okugwa bisobola okusangibwa mu scss/_transitions.scssnga bino bwe bigabanyizibwa mu bitundu ebingi (okugwa ne accordion).

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

Enkozesa

Plugin y’okugwa ekozesa kiraasi ntono okukwata okusitula ebizito:

• .collapseakweka ebirimu
• .collapse.showeraga ebirimu
• .collapsingeyongerwako ng’enkyukakyuka etandise, n’eggyibwawo ng’ewedde

Ebisulo bino osobola okubisanga mu _transitions.scss.

Okuyita mu bikwata ku data

Just add data-bs-toggle="collapse"ne a data-bs-targetku element okusobola okugaba automatically control ya element emu oba eziwera ezisobola okugwa. Ekintu data-bs-targetkikkiriza ekisunsula CSS okukozesa okugwa. Kakasa nti ogattako kiraasi collapseku elementi eyinza okugwa. Bw'oba oyagala kiggule nga kisookerwako, yongera ku kiraasi ey'okugattako show.

Okwongera okuddukanya ekibiina ekiringa accordion ku kitundu ekiyinza okugwa, yongera ku data attribute data-bs-parent="#selector". Laba ku lupapula lwa accordion okumanya ebisingawo.

Okuyita mu JavaScript

Ssobozesa mu ngalo ne:

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

Eby’okulondako

Nga eby'okulonda bwe bisobola okuyisibwa nga biyita mu bikwata ku data oba JavaScript, osobola okugattako erinnya ly'okulonda ku data-bs-, nga mu data-bs-animation="{value}". Kakasa nti okyusa ekika kya case eky’erinnya ly’okulonda okuva ku “ camelCase ” okudda ku “ kebab-case ” ng’oyisa eby’okulonda ng’oyita mu data attributes. Okugeza, kozesa data-bs-custom-class="beautifier"mu kifo kya data-bs-customClass="beautifier".

Okuva ku Bootstrap 5.2.0, ebitundu byonna biwagira ekintu kya data ekiterekeddwa eky'okugezesadata-bs-config ekiyinza okuteeka ensengeka y'ebitundu ennyangu ng'olunyiriri lwa JSON. Ekintu bwe kiba data-bs-config='{"delay":0, "title":123}'n'ebintu data-bs-title="456", omuwendo ogusembayo titlegujja kuba 456era ebifaananyi bya data eby'enjawulo bijja kusazaamu emiwendo egyaweebwa ku data-bs-config. Okugatta ku ekyo, ebikwata ku data ebiriwo bisobola okuteeka emiwendo gya JSON nga data-bs-delay='{"show":0,"hide":150}'.

Enkola

Ekola ebirimu byo nga ekintu ekiyinza okugwa. Akkiriza eby'okulonda eby'okwesalirawo object.

Osobola okukola ekifaananyi ky'okugwa n'omuzimbi, okugeza:

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

Ebibaddewo

Bootstrap's collapse class eraga ebitonotono ebibaawo olw'oku hooking mu collapse functionality.

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