Koaleha

Kamoo e sebetsang kateng

Ho putlama JavaScript plugin e sebelisetsoa ho bontša le ho pata litaba. Likonopo kapa li-ankora li sebelisoa e le lintho tse susumetsang tse etselitsoeng likarolo tse itseng tseo u li fetolang. Ho putlama element ho tla phelisa ho heighttloha ho boleng ba hona joale ho isa ho 0. Ho latela hore na CSS e sebetsana joang le lipopae, u ke ke ua sebelisa ntho paddinge .collapseitseng. Ho e-na le hoo, sebelisa sehlopha e le ntho e ikemetseng ea ho phuthela.

Mohlala

Tobetsa likonopo tse ka tlase ho bontša le ho pata ntho e 'ngoe ka liphetoho tsa sehlopha:

• .collapsee pata litaba
• .collapsinge sebelisoa nakong ea liphetoho
• .collapse.showe bontsha dikahare

Ka kakaretso, re khothaletsa ho sebelisa konopo e nang le data-bs-targettšobotsi. Leha e sa khothaletsoe ho tsoa ponong ea semantic, o ka sebelisa sehokelo se nang le hreftšobotsi (le a role="button"). Maemong ana ka bobeli, ho data-bs-toggle="collapse"hlokahala.

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

E tshekaletseng

Ho putlama ha plugin ho boetse ho ts'ehetsa ho putlama ho otlolohileng. Eketsa sehlopha sa .collapse-horizontalmodifier ho fetola ho e width-na heightle ho beha ntho widthe haufi ea ngoana. Ikutloe u lokolohile ho ngola Sass ea hau ea tloaelo, sebelisa setaele sa inline, kapa sebelisa lisebelisoa tsa rona tsa 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>

Lipheo tse ngata

A <button>kapa <a>e ka bonts'a le ho pata likarolo tse ngata ka ho li supa ka khetho ho eona hrefkapa data-bs-targettšobotsi. E mengata <button>kapa <a>e ka bonts'a le ho pata ntho haeba e mong le e mong a e supa ka hreftšobotsi data-bs-targetea bona

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

Ho fihlella

Etsa bonnete ba hore o eketsa aria-expandedkarolo ea taolo. Tšobotsi ena e hlahisa ka ho hlaka boemo ba hona joale ba ntho e ka putlamang e hokahaneng le taolo ho libali tsa skrini le lisebelisoa tse ling tse thusang. Haeba ntho e putlamang e koetsoe ka ho sa feleng, tšobotsi e karolong ea taolo e lokela ho ba le boleng ba aria-expanded="false". Haeba u setehile hore ntho e ka phuthoang e buloe ka mokhoa oa kamehla u sebelisa showsehlopha, beha aria-expanded="true"taolong. Plugin e tla fetola tšobotsi ena ka bo eona taolong e ipapisitse le hore na ntho e putlang e butsoe kapa che e koetsoe (ka JavaScript, kapa hobane mosebelisi a hlahisitse karolo e 'ngoe ea taolo le eona e hokeletsoeng nthong e tšoanang e putlang). Haeba karolo ea taolo ea HTML e se konopo (mohlala, <a>kapa <div>), tšobotsirole="button"e lokela ho eketsoa ho element.

Haeba karolo ea hau ea taolo e shebile ntho e le 'ngoe e putlang - ke hore, data-bs-targettšobotsi e supa ho idkhetho - o lokela ho eketsa aria-controlstšobotsi ho karolo ea taolo, e nang le idntho e putlamang. Babali ba skrine ba sejoale-joale le mahlale a thusang a tšoanang a sebelisa tšobotsi ena ho fa basebelisi likhutšoane tse ling tsa ho ea ka kotloloho ho ntho e putlang ka boyona.

Hlokomela hore ts'ebetsong ea hona joale ea Bootstrap ha e akaretse litšebelisano tse fapaneng tsa keyboard tse hlalositsoeng ho WAI -ARIA Authoring Practices 1.1 accordion pattern - o tla hloka ho li kenyelletsa le JavaScript e tloaelehileng.

Sass

Lintho tse fapaneng

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

Lihlopha

Litlelase tsa ho putlama li ka fumanoa scss/_transitions.scsskaha tsena li arolelanoa ka likarolo tse ngata (ho putlama 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šebeliso

Plugin ea ho putlama e sebelisa lihlopha tse 'maloa ho sebetsana le ho phahamisa boima:

• .collapsee pata litaba
• .collapse.showe bontsha dikahare
• .collapsinge eketsoa ha phetoho e qala, mme e tlosoe ha e fela

Lihlopha tsena li ka fumanoa ho _transitions.scss.

Ka litšobotsi tsa data

Kenya feela data-bs-toggle="collapse"le a data-bs-targetho element ho fana ka taolo ea ntho e le 'ngoe kapa tse ngata tse putlang. data-bs-targetTšobotsi e amohela khetho ea CSS eo o ka sebelisang ho putlama ho eona . Etsa bonnete ba hore o kenyelletsa sehlopha collapseho ntho e putlang. Haeba u rata hore e bulehe ka mokhoa o tloaelehileng, eketsa sehlopha sa tlatsetso show.

Ho kenya taolo ea sehlopha se kang accordion sebakeng se putlahang, eketsa tšobotsi ea data data-bs-parent="#selector". Sheba leqephe la accordion bakeng sa lintlha tse ling.

Ka JavaScript

Lumella ka letsoho ka:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-bs-, joalo ka data-bs-parent="".

Mekhoa

E kenya tšebetsong litaba tsa hau joalo ka ntho e ka putlamang. E amohela khetho ea boikhethelo object.

O ka etsa mohlala oa ho putlama le moetsi, mohlala:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

Liketsahalo

Sehlopha sa ho putlama sa Bootstrap se pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea ho putlama.

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})