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.

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-targetattribut. Filwaqt li mhux rakkomandat mil-lat semantiku, tista' wkoll tuża link mal- hrefattribut (u role="button"). Fiż-żewġ każijiet, data-toggle="collapse"huwa meħtieġ.

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

Orizzontali

Il-plugin tal-kollass jappoġġja wkoll il-kollass orizzontali. Żid il- .widthklassi modifikatur għat-tranżizzjoni widthminflok heightu waqqaf widthfuq l-element tifel immedjat. Ħossok liberu li tikteb Sass tad-dwana tiegħek, uża stili inline, jew uża l- utilitajiet tal-wisa ' tagħna .

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

Miri multipli

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

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

Eżempju tal-akkordju

Bl-użu tal-komponent tal- karta , tista 'testendi l-imġieba tal-kollass default biex toħloq accordion. Biex tikseb sew l-istil tal-accordion, kun żgur li tuża .accordionbħala tgeżwir.

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

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-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 tal-Bootstrap ma tkoprix l-interazzjonijiet varji tat-tastiera deskritti fil- mudell tal-accordion Gwida tal-Prattiċi tal-Awtur tal-ARIA - ser ikollok bżonn tinkludi dawn lilek innifsek b'JavaScript personalizzat.

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-toggle="collapse"u a data-targetmal-element biex awtomatikament tassenja l-kontroll ta 'element kollassabbli wieħed jew aktar. L- data-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-parent="#selector". Irreferi għad-demo biex tara dan fl-azzjoni.

Via JavaScript

Ippermetti manwalment ma':

$('.collapse').collapse()

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-, bħal f' data-parent="".

Metodi

.collapse(options)

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

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

.collapse('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

.collapse('show')

Juri element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli jkun fil-fatt intwera (jiġifieri qabel ma shown.bs.collapsejseħħ l-avveniment).

.collapse('hide')

Jaħbi element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.collapsejseħħ l-avveniment).

.collapse('dispose')

Jeqred il-kollass ta' element.

Avvenimenti

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})