Phuhlama

Kamoo e šomago ka gona

Plugin ya JavaScript ya go phuhlama e šomišwa go bontšha le go uta diteng. Dikonope goba ditshetledi di šomišwa bjalo ka dihlohleletši tšeo di beakantšwego go dielemente tše itšego tšeo o di fetošago. Go phušola elemente go tla phediša go heighttšwa go boleng bja yona bja bjale go ya go 0. Ge o filwe ka moo CSS e swarago ditshwantšho tša go phela, o ka se šomiše paddinggodimo ga .collapseelemente. Go e na le moo, šomiša sehlopha bjalo ka elemente ya go phuthela ye e ikemetšego.

Mohlala

Klika dikonope tše di lego ka mo tlase go bontšha le go uta elemente ye nngwe ka diphetogo tša sehlopha:

• .collapsee uta diteng
• .collapsinge dirišwa nakong ya diphetogo
• .collapse.showe bontšha diteng

Ka kakaretšo, re kgothaletša go diriša konope yeo e nago le data-bs-targetseka. Le ge e sa kgothaletšwe go tšwa go ntlha ya semantiki, o ka šomiša gape le kgokagano le hrefseka (le a role="button"). Maemong a mabedi, the data-bs-toggle="collapse"e a nyakega.

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

Rapamego

Plugin ya go phuhlama e thekga gape go phuhlama mo go rapaletšego. Oketša .collapse-horizontalsehlopha sa sefetoši go fetoša go widthe na heightle gomme o beakantše a widthgodimo ga elemente ya ngwana ya kgauswi. Ikwe o lokologile go ngwala Sass ya gago ya tlwaelo, diriša mekgwa ya ka gare ga mothaladi, goba o diriša didirišwa tša rena tša bophara .

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

Diphetho tše dintši

A <button>goba <a>e ka bontšha le go uta dielemente tše ntši ka go di šupa ka mokgethi ka go seka sa yona hrefgoba data-bs-target. Multiple <button>goba <a>e ka bontšha le go uta elemente ge e le gore yo mongwe le yo mongwe o e šupa ka bona hrefgoba data-bs-targetseka

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

Phihlelelo

Kgonthiša gore o tlaleletša aria-expandedgo elemente ya taolo. Seka se se fetišetša ka go lebanya boemo bja bjale bja elemente yeo e phuhlamago yeo e tlemilwego go taolo go babadi ba skrine le theknolotši ya go thuša ye e swanago. Ge e le gore elemente ye e phuhlamago e tswaletšwe ka go ikemela, seka godimo ga elemente ya taolo se swanetše go ba le boleng bja aria-expanded="false". Ge e le gore o beakantše elemente ye e phuhlamago gore e bule ka go ikemela o šomiša showsehlopha, beakanya aria-expanded="true"godimo ga taolo go e na le moo. Plugin e tla fetola seka se ka go iketla taolong go ya ka gore goba aowa elemente ye e phuhlamago e butšwe goba e tswaletšwe (ka JavaScript, goba ka lebaka la gore mosediriši o hlohleleditše elemente ye nngwe ya taolo yeo le yona e tlemilwego go elemente ye e swanago ye e phuhlamago). Ge e le gore elemente ya HTML ya elemente ya taolo ga se konope (mohlala, an <a>goba <div>), sekarole="button"e swanetše go tlaleletšwa go elemente.

Ge e le gore elemente ya gago ya taolo e nepiša elemente e tee ye e phuhlamago – ke gore data-bs-targetseka se šupa idmokgethi – o swanetše go oketša aria-controlsseka go elemente ya taolo, yeo e nago le idya elemente ye e phuhlamago. Dibadi tša sebjalebjale tša skrine le theknolotši ye e swanago ya go thuša di šomiša seka se go fa badiriši dikgaoletšo tša tlaleletšo tša go sepela thwii go elemente yeo e phuhlamago ka boyona.

Hlokomela gore phethagatšo ya bjale ya Bootstrap ga e akaretše ditirišano tša go fapafapana tša khiiboto tša boikhethelo tšeo di hlalošitšwego ka go paterone ya accordion ya ARIA Authoring Practices Guide - o tla swanelwa ke go akaretša tše ka bowena ka JavaScript ya tlwaelo.

Sass

Diphetogo

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

Diklase

Diklase tša phetogo ya go phuhlama di ka hwetšwa ka scss/_transitions.scssge tše di abelanwa go ralala le dikarolo tše ntši (go phuhlama le 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);
  }
}

Tšhomišo

Plugin ya go phuhlama e šomiša diklase tše mmalwa go swaragana le go phagamiša boima:

• .collapsee uta diteng
• .collapse.showe bontšha diteng
• .collapsinge tlaleletšwa ge phetogo e thoma, gomme ya tlošwa ge e fedile

Diklase tše di ka hwetšwa go _transitions.scss.

Ka dika ya data

E no oketša data-bs-toggle="collapse"le a data-bs-targetgo elemente go abela ka go iketla taolo ya elemente e tee goba tše ntši tše di phuhlamago. Sebopego data-bs-targetse amogela mokgethi wa CSS go diriša go phuhlama go. Kgonthiša gore o tlaleletša sehlopha collapsego elemente ye e phuhlamago. Ge e ba o rata gore e bulege ka go ikemela, oketša sehlopha sa tlaleletšo show.

Go oketša taolo ya sehlopha ya go swana le accordion go lefelo leo le phuhlamago, oketša seka sa datha data-bs-parent="#selector". Lebelela letlakala la accordion bakeng sa tsebišo e oketšegilego.

Ka JavaScript

Kgontšha ka seatla ka:

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

Dikgetho

Bjalo ka ge dikgetho di ka fetišwa ka dika tša datha goba JavaScript, o ka tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-animation="{value}". Kgonthiša gore o fetoša mohuta wa molato wa leina la kgetho go tšwa go “ camelCase ” go ya go “ kebab-case ” ge o fetiša dikgetho ka dika tša datha. Ka mohlala, diriša data-bs-custom-class="beautifier"go e na le data-bs-customClass="beautifier".

Go tloga go Bootstrap 5.2.0, dikarolo ka moka di thekga seka sa datha ye e bolokilwego ya tekodata-bs-config yeo e ka beago peakanyo ya karolo ye bonolo bjalo ka thapo ya JSON. Ge elemente e na data-bs-config='{"delay":0, "title":123}'le le data-bs-title="456"dika, boleng bja mafelelo titlee tla ba 456gomme dika tša datha tše di aroganego di tla phaela ka thoko boleng bjo bo filwego go data-bs-config. Go tlaleletša, dika tša datha tše di lego gona di kgona go bea dikelo tša JSON go swana le data-bs-delay='{"show":0,"hide":150}'.

Mekgwa ya go šoma

E dira gore diteng tša gago di šome bjalo ka elemente ye e phuhlamago. E amogela dikgetho tša boikhethelo object.

O ka hlama mohlala wa go phuhlama ka moagi, mohlala:

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

Ditiragalo

Sehlopha sa go phuhlama sa Bootstrap se pepentšha ditiragalo tše mmalwa tša go goketša ka mošomo wa go phuhlama.

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