Apseykylmak

Bu nähili işleýär

Apseykylan JavaScript plugin mazmuny görkezmek we gizlemek üçin ulanylýar. Düwmeler ýa-da labyrlar, üýtgeýän aýratyn elementlere düzülen triggerler hökmünde ulanylýar. heightBir elementiň çökmegi, häzirki bahasyndan janlandyrar 0. CSS-iň animasiýalary nähili alyp barýandygyny göz öňünde tutup padding, bir .collapseelementde ulanyp bilmersiňiz. Munuň ýerine synpy garaşsyz örtük elementi hökmünde ulanyň.

Mysal

Synp üýtgeşmeleri arkaly başga bir elementi görkezmek we gizlemek üçin aşakdaky düwmelere basyň:

• .collapsemazmuny gizleýär
• .collapsinggeçiş döwründe ulanylýar
• .collapse.showmazmunyny görkezýär

data-bs-targetUmuman, atributly düwmäni ulanmagy maslahat berýäris . Semantiki nukdaýnazardan maslahat berilmese-de, hrefatribut (we a role="button") bilen baglanyşyk ulanyp bilersiňiz. Iki ýagdaýda-da data-bs-toggle="collapse"talap edilýär.

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

Gorizontal

Apseykylýan plugin keseligine çökmegini hem goldaýar. Munuň ýerine .collapse-horizontalgeçiş synpyny goşuň we derrew çaga elementine sazlaň . Customörite Sass ýazmaga, içerki stilleri ulanmaga ýa-da giňlik hyzmatlarymyzy ulanmaga arkaýyn boluň .widthheightwidth

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

Birnäçe nyşan

A <button>ýa -da atributynda <a>saýlaýjy bilen salgylanyp, birnäçe elementi görkezip we gizläp biler . Bir elementi hersi öz aýratynlygy ýa-da häsiýeti bilen görkezýän bolsa, köp ýa-da görkezip we gizläp bilerhrefdata-bs-target<button><a>hrefdata-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>

Elýeterlilik

aria-expandedDolandyryş elementine hökman goşuň . Bu atribut, okyjylary we şuňa meňzeş kömekçi tehnologiýalary dolandyrmak üçin dolandyryşa bagly çökýän elementiň häzirki ýagdaýyny aç-açan görkezýär. Apsykylýan element deslapky görnüşde ýapylan bolsa, dolandyryş elementindäki atributyň bahasy bolmaly aria-expanded="false". Apsykylýan elementi showsynpy ulanyp, açyk diýip kesgitlän bolsaňyz aria-expanded="true", ýerine dolandyryşda goýuň. Plagin, ýykylýan elementiň açylandygyna ýa-da ýapylmagyna (JavaScript arkaly ýa-da ulanyjy şol bir çöküp bilýän element bilen baglanyşykly başga bir dolandyryş elementini döredendigi sebäpli) dolandyryşda awtomatiki usulda üýtgediler. Dolandyryş elementiniň HTML elementi düwme däl bolsa (meselem, <a>ýa-da <div>), atributrole="button"elementine goşulmalydyr.

Dolandyryş elementiňiz ýekeje ýykylýan elementi nyşana alýan bolsa - ýagny data-bs-targetatribut saýlaýjyny görkezýän bolsa - ýykylýan elementiň düzümini öz içine alýan dolandyryş elementine atribut idgoşmaly . Döwrebap ekran okaýjylary we şuňa meňzeş kömekçi tehnologiýalar, ulanyjylary ýykylýan elementiň özüne gönüden-göni geçmek üçin goşmaça gysga ýollar bilen üpjün etmek üçin bu atributdan peýdalanýarlar.aria-controlsid

“Bootstrap” -yň häzirki durmuşa geçirilmegi, “ ARIA Authoring Practices Guide” akkordeon nagşynda beýan edilen dürli goşmaça klawiatura täsirlerini öz içine almaýandygyny ýadyňyzdan çykarmaň - bulary adaty JavaScript bilen goşmaly bolarsyňyz.

Sass

Üýtgeýjiler

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

Sapaklar

Collykylmak geçiş synplaryny tapyp bolýar, scss/_transitions.scsssebäbi bular köp komponentlerde paýlaşylýar (çökmek we akkordeon).

.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);
  }
}

Ulanylyşy

Apseykylýan plugin agyr götermek üçin birnäçe synp ulanýar:

• .collapsemazmuny gizleýär
• .collapse.showmazmunyny görkezýär
• .collapsinggeçiş başlanda goşulýar we gutarandan soň aýrylýar

Bu sapaklary tapyp bilersiňiz _transitions.scss.

Maglumat atributlary arkaly

Diňe bir ýa-da birnäçe çöküp bilýän elementlere gözegçiligi awtomatiki bellemek üçin elemente data-bs-toggle="collapse"goşuň . data-bs-targetAýratynlyk data-bs-target, çökmegi ulanmak üçin CSS saýlaýjysyny kabul edýär. Synpy collapseýykylýan elemente goşuň. Adaty açylmagyny isleseňiz, goşmaça synp goşuň show.

Çökýän ýere akkordeona meňzeş topar dolandyryşyny goşmak üçin maglumat atributyny goşuň data-bs-parent="#selector". Has giňişleýin maglumat üçin akkordeon sahypasyna serediň .

JavaScript arkaly

El bilen işlediň:

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

Görnüş

Opsiýalary maglumat atributlary ýa-da JavaScript arkaly geçirip bolýandygy sebäpli, opsiýa adyny data-bs-bolşy ýaly goşup bilersiňiz data-bs-animation="{value}". Opsiýalary maglumat atributlary arkaly geçireniňizde , opsiýanyň adynyň görnüşini “ camelCase ” -den “ kebab-case ” diýip üýtgediň. Mysal üçin, data-bs-custom-class="beautifier"ýerine ulanyň data-bs-customClass="beautifier".

“Bootstrap 5.2.0” -e görä, ähli komponentler JSON setiri hökmünde ýönekeý komponent konfigurasiýasyny saklap bilýän tejribe ätiýaçlandyrylan maglumat atributyny goldaýar. data-bs-configHaçan-da bir element data-bs-config='{"delay":0, "title":123}'we data-bs-title="456"häsiýetler bar bolsa, iň soňky titlebaha bolar 456we aýratyn maglumatlar atributlary berlen bahalary ýok eder data-bs-config. Mundan başga-da, bar bolan maglumatlar atributlary ýaly JSON bahalaryny ýerleşdirmäge ukyply data-bs-delay='{"show":0,"hide":150}'.

Usullar

Mazmunyňyzy çökýän element hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

Konstruktor bilen çökmek meselesini döredip bilersiňiz, mysal üçin:

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

Wakalar

“Bootstrap” -yň çökmegi synpy, çökmek funksiýasyna girmek üçin birnäçe wakany paş edýär.

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