Kollass

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

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

Orizzontali

Il-plugin tal-kollass jappoġġja wkoll il-kollass orizzontali. Żid il- .collapse-horizontalklassi 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-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>

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

<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 Gwida tal-Prattiċi tal-Awtur ARIA - ser ikollok bżonn tinkludi dawn lilek innifsek b'JavaScript personalizzat.

Sass

Varjabbli

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .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);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

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ħall- paġna tal-accordion għal aktar informazzjoni.

Via JavaScript

Ippermetti manwalment ma':

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

Għażliet

Peress li l-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript, tista' tehmeż isem ta' għażla ma' data-bs-, bħal f' data-bs-animation="{value}". Kun żgur li tbiddel it-tip tal-każ tal-isem tal-għażla minn " camelCase " għal " kebab-case " meta tgħaddi l-għażliet permezz tal-attributi tad-dejta. Per eżempju, uża data-bs-custom-class="beautifier"minflok data-bs-customClass="beautifier".

Minn Bootstrap 5.2.0, il-komponenti kollha jappoġġaw attribut ta' data riżervat sperimentalidata-bs-config li jista' jospita konfigurazzjoni ta' komponent sempliċi bħala string JSON. Meta element ikollu data-bs-config='{"delay":0, "title":123}'u data-bs-title="456"attributi, il- titlevalur finali se jkun 456u l-attributi tad-dejta separati jegħlbu l-valuri mogħtija fuq data-bs-config. Barra minn hekk, l-attributi tad-dejta eżistenti jistgħu jospitaw valuri JSON bħal data-bs-delay='{"show":0,"hide":150}'.

Metodi

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:

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

Avvenimenti

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

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