Aqbeż għall-kontenut prinċipali Aqbeż għan-navigazzjoni tad-dokumenti
in English

Kollass

Aqleb il-viżibilità tal-kontenut fil-proġett tiegħek bi ftit klassijiet u l-plugins JavaScript tagħna.

Kif taħdem

Il-plugin JavaScript kollass jintuża biex juri u jaħbi l-kontenut. Buttuni jew ankri jintużaw bħala triggers li huma mmappjati għal elementi speċifiċi li taqleb. Il-kollass ta' element se janima l- heightmill-valur attwali tiegħu għal 0. Minħabba kif is-CSS jimmaniġġja l-animazzjonijiet, ma tistax tuża paddingfuq .collapseelement. Minflok, uża l-klassi bħala element indipendenti tat-tgeżwir.

L-effett ta 'animazzjoni ta' dan il-komponent jiddependi fuq il prefers-reduced-motion-mistoqsija tal-midja. Ara t- taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .

Eżempju

Ikklikkja l-buttuni hawn taħt biex turi u taħbi element ieħor permezz ta' bidliet fil-klassi:

  • .collapsejaħbi l-kontenut
  • .collapsinghija applikata waqt transizzjonijiet
  • .collapse.showjuri kontenut

Ġeneralment, nirrakkomandaw li tuża buttuna bl- data-bs-targetattribut. Filwaqt li mhux rakkomandat mil-lat semantiku, tista' wkoll tuża link mal- hrefattribut (u role="button"). Fiż-żewġ każijiet, data-bs-toggle="collapse"huwa meħtieġ.

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

Miri multipli

A <button>jew <a>jista 'juri u jaħbi elementi multipli billi jirreferenzjahom b'selettur fl- attribut tiegħu hrefjew . data-bs-targetMultipli <button>jew <a>jistgħu juru u jaħbu element jekk kull wieħed jirreferu għalih bl- attribut hrefjew tagħhomdata-bs-target

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

Aċċessibilità

Kun żgur li żżid aria-expandedmal-element ta 'kontroll. Dan l-attribut iwassal b'mod espliċitu l-istat attwali tal-element kollassabbli marbut mal-kontroll lill-qarrejja tal-iskrin u teknoloġiji assistivi simili. Jekk l-element kollassabbli jingħalaq awtomatikament, l-attribut fuq l-element ta 'kontroll għandu jkollu valur ta' aria-expanded="false". Jekk issettjajt l-element kollassabbli biex ikun miftuħ awtomatikament billi tuża l- showklassi, issettja aria-expanded="true"fuq il-kontroll minflok. Il-plugin awtomatikament ibiddel dan l-attribut fuq il-kontroll ibbażat fuq jekk l-element kollassabbli infetaħx jew ingħalaq jew le (permezz ta’ JavaScript, jew minħabba li l-utent qajjem element ta’ kontroll ieħor marbut ukoll mal-istess element kollassabbli). Jekk l-element HTML tal-element ta' kontroll mhuwiex buttuna (eż., <a>jew <div>), l-attributrole="button"għandhom jiġu miżjuda mal-element.

Jekk l-element ta' kontroll tiegħek qed jimmira għal element wieħed li jista' jiġġarraf – jiġifieri l- data-bs-targetattribut qed jindika idselettur – għandek iżżid l- aria-controlsattribut ma' l-element ta' kontroll, li jkun fih l id-element li jista' jiġġarraf. Screen readers moderni u teknoloġiji ta' assistenza simili jagħmlu użu minn dan l-attribut biex jipprovdu lill-utenti b'shortcuts addizzjonali biex jinnavigaw direttament lejn l-element kollassabbli innifsu.

Innota li l-implimentazzjoni attwali ta' Bootstrap ma tkoprix id-diversi interazzjonijiet fakultattivi tat- tastiera deskritti fil- mudell tal-accordion WAI-ARIA Authoring Practices 1.1 - ser ikollok bżonn tinkludi dawn lilek innifsek b'JavaScript personalizzat.

Sass

Varjabbli

$transition-collapse:         height .35s ease;

Klassijiet

Il-klassijiet tat-tranżizzjoni tal-kollass jistgħu jinstabu fi scss/_transitions.scssperess li dawn huma kondiviżi bejn komponenti multipli (kollass u accordion).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

Użu

Il-plugin tal-kollass juża ftit klassijiet biex jimmaniġġja l-irfigħ tqil:

  • .collapsejaħbi l-kontenut
  • .collapse.showjuri l-kontenut
  • .collapsingtiżdied meta tibda t-tranżizzjoni, u titneħħa meta tispiċċa

Dawn il-klassijiet jistgħu jinstabu fi _transitions.scss.

Via attributi tad-data

Żid biss data-bs-toggle="collapse"u a data-bs-targetmal-element biex awtomatikament tassenja l-kontroll ta 'element kollassabbli wieħed jew aktar. L- data-bs-targetattribut jaċċetta selettur CSS biex japplika l-kollass għalih. Kun żgur li żżid il-klassi collapsemal-element kollassabbli. Jekk tixtieq li tiftaħ awtomatikament, żid il-klassi addizzjonali show.

Biex iżżid ġestjoni tal-gruppi bħal accordion f'żona li tista 'tiġġarraf, żid l-attribut tad-dejta data-bs-parent="#selector". Irreferi għad-demo biex tara dan fl-azzjoni.

Via JavaScript

Ippermetti manwalment ma':

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

Għażliet

L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-bs-, bħal f' data-bs-parent="".

Isem Tip Default Deskrizzjoni
parent selettur | Oġġett jQuery | Element DOM false Jekk jiġi pprovdut ġenitur, allura l-elementi kollha li jistgħu jiġġarfu taħt il-ġenitur speċifikat jingħalqu meta jintwera dan l-oġġett kollassabbli. (simili għall-imġieba tradizzjonali tal-accordion - dan jiddependi fuq il- cardklassi). L-attribut għandu jiġi stabbilit fuq iż-żona mira kollassabbli.
toggle boolean true Jiddawwar l-element kollassabbli fuq l-invokazzjoni

Metodi

Metodi asinkroniċi u tranżizzjonijiet

Il-metodi kollha tal-API huma asinkroniċi u jibdew transizzjoni . Jirritornaw għand min iċempel hekk kif tinbeda t-tranżizzjoni iżda qabel ma tispiċċa . Barra minn hekk, sejħa ta' metodu fuq komponent ta' tranżizzjoni se tiġi injorata .

Ara d-dokumentazzjoni JavaScript tagħna għal aktar informazzjoni .

Jattiva l-kontenut tiegħek bħala element kollassabbli. Jaċċetta għażliet fakultattivi object.

Tista 'toħloq istanza ta' kollass mal-kostruttur, pereżempju:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Metodu Deskrizzjoni
toggle Jitbiddel element kollassabbli biex jintwera jew moħbi. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie muri jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.collapsejew ).hidden.bs.collapse
show Juri element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli jkun fil-fatt intwera (eż., qabel ma shown.bs.collapsejseħħ l-avveniment).
hide Jaħbi element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie moħbi (eż., qabel ma hidden.bs.collapsejseħħ l-avveniment).
dispose Jeqred il-kollass ta' element. (Tneħħi d-dejta maħżuna fuq l-element DOM)
getInstance Metodu statiku li jippermettilek li tikseb l-istanza tal-kollass assoċjata ma 'element DOM, tista' tużah bħal dan:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Metodu statiku li jirritorna istanza ta' kollass assoċjata ma' element DOM jew toħloq waħda ġdida f'każ li ma kinitx inizjalizzata. Tista' tużah bħal dan:bootstrap.Collapse.getOrCreateInstance(element)

Avvenimenti

Il-klassi tal-kollass ta 'Bootstrap tesponi ftit avvenimenti għall-ganċ fil-funzjonalità tal-kollass.

Tip ta' avveniment Deskrizzjoni
show.bs.collapse Dan l-avveniment jispara immedjatament meta showjissejjaħ il-metodu tal-istanza.
shown.bs.collapse Dan l-avveniment jiġi sparat meta element ta 'kollass ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew).
hide.bs.collapse Dan l-avveniment jiġi sparat immedjatament meta l- hidemetodu jkun ġie msejjaħ.
hidden.bs.collapse Dan l-avveniment jiġi sparat meta element ta 'kollass ikun ġie moħbi mill-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})