Apseykylmak
Taslamanyňyzyň mazmunyny birnäçe synp we JavaScript plaginlerimiz bilen üýtgediň.
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. height
Bir elementiň çökmegi, häzirki bahasyndan janlandyrar 0
. CSS-iň animasiýalary nähili alyp barýandygyny göz öňünde tutup padding
, bir .collapse
elementde ulanyp bilmersiňiz. Munuň ýerine synpy garaşsyz örtük elementi hökmünde ulanyň.
prefers-reduced-motion
media talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň
.
Mysal
Synp üýtgeşmeleri arkaly başga bir elementi görkezmek we gizlemek üçin aşakdaky düwmelere basyň:
.collapse
mazmuny gizleýär.collapsing
geçiş döwründe ulanylýar.collapse.show
mazmunyny görkezýär
data-bs-target
Umuman, atributly düwmäni ulanmagy maslahat berýäris . Semantiki nukdaýnazardan maslahat berilmese-de, href
atribut (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>
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 bilerhref
data-bs-target
<button>
<a>
href
data-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-expanded
Dolandyryş 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 show
synpy 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-target
atribut saýlaýjyny görkezýän bolsa - ýykylýan elementiň düzümini öz içine alýan dolandyryş elementine atribut id
goş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-controls
id
“Bootstrap” -yň häzirki durmuşa geçirilmegi , WAI-ARIA Awtorlaşdyryş amallary 1.1 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;
Sapaklar
Collykylmak geçiş synplaryny tapyp bolýar, scss/_transitions.scss
sebä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);
}
Ulanylyşy
Apseykylýan plugin agyr götermek üçin birnäçe synp ulanýar:
.collapse
mazmuny gizleýär.collapse.show
mazmunyny görkezýär.collapsing
geç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-target
Aý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"
. Muny hereketde görmek üçin demo serediň.
JavaScript arkaly
El bilen işlediň:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Görnüş
Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bs-
bolşy ýaly goşuň data-bs-parent=""
.
Ady | Görnüşi | Bellenen | Düşündiriş |
---|---|---|---|
parent |
saýlaýjy | jQuery obýekti | DOM elementi | false |
Ene-ata üpjün edilen bolsa, bu ýykylýan element görkezilende görkezilen ene-atanyň aşagyndaky ähli çöküp bilýän elementler ýapylar. (adaty akkordeon häsiýetine meňzeýär - bu card synpa bagly). Aýratynlyk nyşanyň ýykylýan ýerinde kesgitlenmeli. |
toggle |
boolean | true |
Apykylýan elementi çakylyk bilen üýtgedýär |
Usullar
Asynkron usullar we geçişler
APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .
Has giňişleýin maglumat üçin JavaScript resminamalarymyza serediň .
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:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Usul | Düşündiriş |
---|---|
toggle |
Görkezilýän ýa-da gizlenýän elementi çalyşýar. Apsykylýan element hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.collapse ýa-da hidden.bs.collapse waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär. |
show |
Apsykylýan elementi görkezýär. Apsykylýan element hakykatdanam görkezilmänkä (meselem, shown.bs.collapse waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär. |
hide |
Apsykylýan elementi gizleýär. Apsykylýan element aslynda gizlenmänkä (meselem, hidden.bs.collapse waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär. |
dispose |
Bir elementiň çökmegini ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar) |
getInstance |
DOM elementi bilen baglanyşykly çökmek meselesini almaga mümkinçilik berýän statiki usul, ony şeýle ulanyp bilersiňiz:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
DOM elementi bilen baglanyşykly çöküş mysalyny ýa-da başlamadyk ýagdaýynda täzesini döredýän statiki usul. Muny şeýle ulanyp bilersiňiz:bootstrap.Collapse.getOrCreateInstance(element) |
Wakalar
“Bootstrap” -yň çökmegi synpy, çökmek funksiýasyna girmek üçin birnäçe wakany paş edýär.
Çäräniň görnüşi | Düşündiriş |
---|---|
show.bs.collapse |
show Bu waka mysal usuly çagyrylanda derrew ýanýar . |
shown.bs.collapse |
Bu hadysa, çöküş elementi ulanyja görünen mahaly atylýar (CSS geçişleriniň tamamlanmagyna garaşýar). |
hide.bs.collapse |
hide Bu waka usul çagyrylanda derrew atylýar . |
hidden.bs.collapse |
Bu hadysa, ulanyjydan çökmek elementi gizlenende (CSS geçişleriniň tamamlanmagyna garaşar) atylýar. |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})