in English

Phuhlama

Fetoša go bonagala ga diteng go ralala le porojeke ya gago ka diklase tše mmalwa le di-plugin tša rena tša JavaScript.

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. Ka ge CSS e swara 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.

Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

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-targetseka. Le ge e sa kgothaletšwe go tšwa go ntlha ya semantiki, o ka šomiša gape kgokagano le hrefseka (le a role="button"). Maemong a mabedi, the data-toggle="collapse"e a nyakega.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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 .widthsehlopha 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 .

Hle ela hloko gore le ge mohlala wo o lego ka mo tlase o na le min-heightsete ya go efoga go penta gape ka mo go feteletšego ka go di-doc tša rena, se ga se nyakege ka go lebanya. Ke fela widthelemente ya godimo ga ngwana yeo e nyakegago.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      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 wa JQuery ka go seka sa yona hrefgoba data-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-targetseka

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.
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.
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

Mohlala wa accordion

Ka go šomiša karolo ya karata , o ka katološa boitshwaro bja go phuhlama bja go se fetoge go hlama accordion. Go fihlelela gabotse mokgwa wa accordion, kgonthišetša gore o diriša .accordionbjalo ka sephuthedi.

Ba bang ba placeholder dikahare bakeng sa pele accordion phanele. phanele ena e bontšitsoe ka default, ka lebaka la .showsehlopha.

Some placeholder content for the second accordion panel. This panel is hidden by default.

And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </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-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š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.

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 tlaleletša data-toggle="collapse"le a data-targetgo elemente go abela ka go iketla taolo ya elemente e tee goba tše ntši tše di phuhlamago. Sebopego data-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-parent="#selector". Lebelela demo go bona se se šoma.

Ka JavaScript

Kgontšha ka seatla ka:

$('.collapse').collapse()

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-parent="".

Leina Mohuta Hlokomologa Tlhalošo
motswadi mokgethi wa | jQuery selo sa | DOM elemente maaka Ge e le gore motswadi o filwe, gona dielemente ka moka tše di phuhlamago ka fase ga motswadi yo a laeditšwego di tla tswalelwa ge selo se se se phuhlamago se bontšhwa. (e tšoanang le boitšoaro ba setso accordion - sena se itšetlehile ka cardsehlopha). Sebopego se swanetše go bewa godimo ga lefelo leo le phuhlamago leo le nepišitšwego.
go fetola boolean ya go swana nnete Toggles elements collapsible ka pitso

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

E fetola elemente ye e phuhlamago go bontšhwa goba ye e utilwego. E boela go mogala pele ga ge elemente ye e phuhlamago e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.collapsegoba hidden.bs.collapsee direga).

.collapse('show')

E bontšha elemente yeo e ka phuhlamago. E boela go mogala pele ga ge elemente ye e phuhlamago e bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.collapsetiragalo e direga).

.collapse('hide')

E uta elemente yeo e ka phuhlamago. E boela go mogala pele ga ge elemente ye e phuhlamago e tloga e utilwe (ke gore pele ga ge hidden.bs.collapsetiragalo e direga).

.collapse('dispose')

E senya go phuhlama ga elemente.

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.

Mohuta wa Tiragalo Tlhalošo
bontšha.bs.go phuhlama Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa.
e bontšhitšwe.bs.e phuhlama Tiragalo ye e thuntšhwa ge elemente ya go phuhlama e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe).
pata.bs.e phuhlama Tiragalo ye e thuntšhwa ka pela ge hidemokgwa o biditšwe.
e utilwego.bs.e phuhlama Tiragalo ye e thuntšhwa ge elemente ya go phuhlama e utilwe go tšwa go modiriši (e tla emela gore diphetogo tša CSS di phethe).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})