Dze anyi

Ale si wòwɔa dɔe

Wozãa collapse JavaScript plugin tsɔ ɖea emenyawo fiana heɣlaa wo. Wozãa abɔtawo alo sekewo abe nusiwo aʋã wo ene siwo wowɔ ɖe nɔnɔmetata dzi na nu tɔxɛ aɖewo siwo nètrɔna. Ne ègbã element aɖe la, ana agbe nanɔ agbe heighttso eƒe asixɔxɔ si li fifia dzi va ɖo 0. Ne míebu alesi CSS wɔa nu ɖe ​​nɔnɔmetatawo ŋui ŋu la, màte ŋu azãe paddingɖe .collapseelement aɖe dzi o. Ke boŋ zã klass la abe nu babla ƒe akpa si le eɖokui si ene.

Kpɔɖeŋu

Zi abɔti siwo le ete dzi be nàɖe nu bubu aɖe afia ahaɣlae to klass ƒe tɔtrɔwo dzi:

• .collapseɣlaa nyatakaka siwo le eme
• .collapsingwozãnɛ le tɔtrɔwo me
• .collapse.showɖea emenyawo fiana

Zi geɖe la, míeɖo aɖaŋu be nàzã abɔta si me data-bs-targetnɔnɔmea le. Togbɔ be womeɖo aɖaŋu le gɔmesese ƒe nukpɔsusu nu o hã la, àte ŋu azã kadodo si me hrefnɔnɔmea le (kple a role="button"). Le go eveawo siaa me la, data-bs-toggle="collapse"wobia tso ame si.

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

Si mlɔ anyi

Collapse plugin la hã doa alɔ horizontal collapsing. Tsɔ .collapse-horizontaltɔtrɔɖenu ƒe hatsotso kpe ɖe eŋu be nàtrɔ le ɖe widthteƒe heighteye nàɖo a widthɖe vi ƒe akpa si le enumake la dzi. Miate ŋu aŋlɔ wò ŋutɔ wò Sass si nèwɔ ɖe ɖoɖo nu faa, azã atsyã siwo le fli me, alo azã míaƒe kekeme ƒe dɔwɔnuwo .

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

Taɖodzinu geɖe

A <button>alo <a>ateŋu aɖe nu geɖewo afia ahaɣla wo to wo yɔyɔ kple tiatiawɔla le eƒe hrefalo data-bs-targetnɔnɔme me. Geɖe <button>alo <a>ateŋu aɖe element aɖe afia ahaɣlae ne wo dometɔ ɖesiaɖe ƒo nu tso eŋu kple woƒe hrefalo data-bs-targetnɔnɔme

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

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

Kpɔ egbɔ be yetsɔe kpe aria-expandedɖe nusi dzi wokpɔna ŋu. Nɔnɔme sia ɖea nusi woate ŋu agbã si wobla ɖe dziɖuɖua ŋu ƒe nɔnɔme fifia fiana tẽe na screen readers kple kpekpeɖeŋu mɔ̃ɖaŋununya mawo tɔgbe. Ne wotu nusi woateŋu agbã la le gɔmedzedzea me la, ele be nɔnɔme si le dziɖuɖu ƒe akpaa dzi ƒe asixɔxɔ nanye aria-expanded="false". Ne èɖo collapsible element la be wòaʋu le gɔmedzedzea me to showklass la zazã me la, ɖoe aria-expanded="true"ɖe control la dzi boŋ. Plugin la atrɔ nɔnɔme sia le eɖokui si le dziɖuɖua dzi le esi woʋu alo wotu nu si woate ŋu agbã la alo womeʋui o nu (to JavaScript dzi, alo le esi zãla la ʋu dziɖuɖu ƒe akpa bubu si hã bla ɖe nu ma ke si woate ŋu agbã la ŋu ta). Ne dziɖuɖu ƒe akpaa ƒe HTML akpaa menye abɔta o (le kpɔɖeŋu me, an <a>alo <div>), nɔnɔmearole="button"ele be woatsɔe akpe ɖe element la ŋu.

Ne wò dziɖuɖu ƒe akpaa le taɖodzinu ɖom ɖe nu ɖeka si woate ŋu agbã ŋu – i.e. data-bs-targetnɔnɔme la le asi fiam idtiatiawɔla aɖe – ele be nàtsɔ aria-controlsnɔnɔmea akpe ɖe dziɖuɖu ƒe akpaa ŋu, si me akpa idsi woate ŋu agbã la ƒe la le. Egbegbe screen readerwo kple mɔ̃ɖaŋununya mawo tɔgbe siwo kpena ɖe ame ŋu wɔa nɔnɔme sia ŋudɔ tsɔ naa mɔ kpui bubuwo ezãlawo be woazɔ mɔ ayi nusi woate ŋu agbã la ŋutɔ gbɔ tẽ.

De dzesii be Bootstrap ƒe dɔwɔwɔ fifia meku ɖe keyboard ƒe kadodo vovovo siwo woateŋu awɔ si ŋu woƒo nu tsoe le ARIA Authoring Practices Guide accordion pattern me ŋu o - ahiã be wò ŋutɔ nàtsɔ esiawo ade JavaScript tɔxɛa me.

Sass ƒe nyawo

Nusiwo trɔna

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

Klasswo me

Woateŋu akpɔ collapse tɔtrɔ ƒe klasswo le scss/_transitions.scssabe esiawo ma le akpa geɖewo me (collapse kple 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);
  }
}

Zãzã

Collapse plugin la zãa klass ʋee aɖewo tsɔ kpɔa kpekpeme kɔkɔa gbɔ:

• .collapseɣlaa emenyawo
• .collapse.showɖea emenyawo fiana
• .collapsingwotsɔa kpenɛ ne tɔtrɔa dze egɔme, eye woɖenɛ ɖa ne ewu enu

Woate ŋu akpɔ klass siawo le _transitions.scss.

To nyatakaka ƒe nɔnɔmewo dzi

Ðeko nàtsɔ data-bs-toggle="collapse"kple a akpe data-bs-targetɖe element la ŋu be nàde dɔ asi na element ɖeka alo esi wu nenema si woate ŋu agbã la dzi kpɔkpɔ le eɖokui si. Nɔnɔmea data-bs-targetxɔa CSS tiatia aɖe be woatsɔ awɔ collapse la ŋudɔ ɖe. Kpɔ egbɔ be yetsɔ klass la kpe collapseɖe nusi woate ŋu agbã ŋu. Ne èdi be wòaʋu le gɔmedzedzea me la, tsɔ klass bubu kpee show.

Be nàtsɔ ƒuƒoƒodzikpɔkpɔ si le abe accordion ene akpe ɖe teƒe si woate ŋu agbã ŋu la, tsɔ nyatakaka ƒe nɔnɔme kpe ɖe eŋu data-bs-parent="#selector". Kpɔ accordion ƒe axaa hena nyatakaka bubuwo.

To JavaScript dzi

Na wòawɔ dɔ kple asi kple:

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

Tiatiawɔblɔɖewo

Esi woateŋu atsɔ tiatiawɔnuwo ato nyatakaka nɔnɔmewo alo JavaScript dzi ta la, àteŋu atsɔ tiatia ŋkɔ akpe ɖe data-bs-, abe alesi wòle le data-bs-animation="{value}". Kpɔ egbɔ be yetrɔ tiatia ŋkɔa ƒe case type tso “ camelCase ” yi “ kebab-case ” ne èle tiatiaawo tom to data attributes dzi. Le kpɔɖeŋu me, zãe data-bs-custom-class="beautifier"ɖe data-bs-customClass="beautifier".

Tso Bootstrap 5.2.0 dzi la, akpaawo katã doa alɔ dodokpɔ ƒe nyatakaka si wodzra ɖo ƒe nɔnɔme data-bs-configsi ateŋu axɔ akpa ƒe ɖoɖo bɔbɔe abe JSON ka ene. Ne element aɖe si data-bs-config='{"delay":0, "title":123}'kple data-bs-title="456"nɔnɔmewo le la, asixɔxɔ mamlɛtɔ titleanye 456eye nyatakaka nɔnɔme vovovoawo axɔ asixɔxɔ siwo wona le data-bs-config. Tsɔ kpe ɖe eŋu la, nyatakaka ƒe nɔnɔme siwo li fifia te ŋu tsɔa JSON ƒe asixɔxɔwo abe data-bs-delay='{"show":0,"hide":150}'.

Mɔnuwo

Ewɔa wò nyatakakawo ŋudɔ abe nusi woate ŋu agbã ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

Àteŋu awɔ collapse instance kple constructor la, le kpɔɖeŋu me:

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

Nudzɔdzɔwo

Bootstrap ƒe collapse klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe collapse dɔwɔwɔ me.

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