Tolestu
Aldatu zure proiektuko edukiaren ikusgarritasuna klase batzuekin eta gure JavaScript pluginekin.
Nola dabil
Tolestu JavaScript plugina edukia erakusteko eta ezkutatzeko erabiltzen da. Botoiak edo aingurak aktibatzen dituzun elementu espezifikoekin mapatzen diren abiarazle gisa erabiltzen dira. height
Elementu bat tolestuz gero , bere uneko baliotik animatuko da 0
. CSS-k animazioak nola kudeatzen dituen ikusita, ezin duzu elementu padding
batean erabili. .collapse
Horren ordez, erabili klasea biltzeko elementu independente gisa.
prefers-reduced-motion
multimedia kontsultaren menpe dago. Ikusi
gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .
Adibidea
Egin klik beheko botoietan klase aldaketen bidez beste elementu bat erakusteko eta ezkutatzeko:
.collapse
edukia ezkutatzen du.collapsing
trantsizioetan aplikatzen da.collapse.show
edukia erakusten du
Orokorrean, data-bs-target
atributua duen botoi bat erabiltzea gomendatzen dugu. Ikuspegi semantikotik gomendagarria ez den arren, href
atributuarekin (eta role="button"
) esteka bat ere erabil dezakezu. Bi kasuetan, data-bs-toggle="collapse"
beharrezkoa da.
<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>
Helburu anitz
A <button>
edo <a>
elementu anitz erakutsi eta ezkutatu ditzake bere href
edo data-bs-target
atributuan hautatzaile batekin erreferentzia eginez. Anitzak <button>
edo <a>
elementu bat erakutsi eta ezkutatu dezake bakoitzak bere href
edo data-bs-target
atributuarekin erreferentzia egiten badio
<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>
Irisgarritasuna
Ziurtatu aria-expanded
kontrol-elementuari gehitzea. Atributu honek modu esplizituan adierazten die kontrolarekin lotutako elementu tolesgarriaren egungo egoera pantaila-irakurleei eta antzeko laguntza-teknologiei. Elementu tolesgarria lehenespenez itxita badago, kontrol-elementuaren atributuak balio izan beharko luke aria-expanded="false"
. Elementu tolesgarria lehenespenez irekita egon dadin ezarri baduzu show
klasea erabiliz, ezarri aria-expanded="true"
kontrolaren ordez. Pluginak atributu hau automatikoki aldatuko du kontrolean, elementu tolesgarria ireki edo itxi den ala ez kontuan hartuta (JavaScript bidez edo erabiltzaileak elementu tolesgarri berari lotuta dagoen beste kontrol-elementu bat abiarazi duelako). Kontrol-elementuaren HTML elementua botoi bat ez bada (adibidez, an <a>
edo <div>
), atributuarole="button"
elementuari gehitu behar zaio.
Zure kontrol-elementuak elementu tolesgarri bakar batera bideratzen badu (hau da, data-bs-target
atributuak id
hautatzaile batera seinalatzen badu) atributua gehitu behar diozu aria-controls
kontrol-elementuari, id
elementu tolesgarria duen. Pantaila-irakurle modernoek eta antzeko laguntza-teknologiek atributu hau erabiltzen dute erabiltzaileei lasterbide osagarriak eskaintzeko, elementu tolesgarrira zuzenean nabigatzeko.
Kontuan izan Bootstrap-en egungo inplementazioak ez dituela WAI-ARIA Authoring Practices 1.1 akordeoi ereduan deskribatzen diren teklatu-interakzio aukerako desberdinak estaltzen; zuk zeuk sartu beharko dituzu JavaScript pertsonalizatuarekin.
Sass
Aldagaiak
$transition-collapse: height .35s ease;
Klaseak
Tolestu trantsizio-klaseak aurki daitezke scss/_transitions.scss
, osagai anitzetan partekatzen baitira (kolapsoa eta akordeoia).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Erabilera
Tolestu pluginak klase batzuk erabiltzen ditu astunak kudeatzeko:
.collapse
edukia ezkutatzen du.collapse.show
edukia erakusten du.collapsing
trantsizioa hasten denean gehitzen da, eta amaitzean kentzen da
Klase hauek atalean aurki daitezke _transitions.scss
.
Datu-atributuen bidez
Gehitu data-bs-toggle="collapse"
eta a data-bs-target
elementuari elementu tolesgarri baten edo gehiagoren kontrola automatikoki esleitzeko. Atributuak CSS hautatzaile bat onartzen du data-bs-target
kolapsoa aplikatzeko. Ziurtatu klasea gehitzen duzula collapse
elementu tolesgarrian. Lehenetsita irekitzea nahi baduzu, gehitu klase gehigarria show
.
Akordeoi moduko taldeen kudeaketa eremu tolesgarri batean gehitzeko, gehitu datu-atributua data-bs-parent="#selector"
. Ikusi demoa hau martxan ikusteko.
JavaScript bidez
Gaitu eskuz honekin:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Aukerak
Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-bs-
, hemen bezala data-bs-parent=""
.
Izena | Mota | Lehenetsia | Deskribapena |
---|---|---|---|
parent |
hautatzailea | jQuery objektua | DOM elementua | false |
Gurasoa ematen bada, zehaztutako gurasoaren azpian dauden elementu tolesgarri guztiak itxiko dira elementu tolesgarri hau erakusten denean. (akordeoiaren portaera tradizionalaren antzekoa - hau card klasearen araberakoa da). Atributua helburuko eremu tolesgarrian ezarri behar da. |
toggle |
boolearra | true |
Elementu tolesgarria aktibatzen du deitzean |
Metodoak
Metodo asinkronoak eta trantsizioak
API metodo guztiak asinkronoak dira eta trantsizio bat hasten dute . Trantsizioa hasi bezain laster baina amaitu baino lehen itzultzen dira deitzailearengana . Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .
Ikus gure JavaScript dokumentazioa informazio gehiago lortzeko .
Zure edukia elementu tolesgarri gisa aktibatzen du. Aukerako aukerak onartzen ditu object
.
Tolesteko instantzia bat sor dezakezu konstruktorearekin, adibidez:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Metodoa | Deskribapena |
---|---|
toggle |
Elementu tolesgarri bat bistaratzen edo ezkutuan jartzen du. Deitzen duenari itzultzen zaio elementu tolesgarria benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.collapse edo hidden.bs.collapse gertaera gertatu baino lehen). |
show |
Elementu tolesgarria erakusten du. Deitzen duenari itzultzen zaio elementu tolesgarria benetan erakutsi aurretik (adibidez, shown.bs.collapse gertaera gertatu aurretik). |
hide |
Elementu tolesgarri bat ezkutatzen du. Deitzen duenari itzultzen zaio elementu tolesgarria benetan ezkutatu aurretik (adibidez, hidden.bs.collapse gertaera gertatu aurretik). |
dispose |
Elementu baten kolapsoa suntsitzen du. (DOM elementuan gordetako datuak kentzen ditu) |
getInstance |
Metodo estatikoa DOM elementu bati lotutako kolapso-instantzia lortzeko aukera ematen duena, honela erabil dezakezu:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Metodo estatikoa DOM elementu bati lotutako kolapso-instantzia bat itzultzen duena edo berri bat sortzen duena, hasieratu ez bazen. Honela erabil dezakezu:bootstrap.Collapse.getOrCreateInstance(element) |
Gertaerak
Bootstrap-en kolapso-klaseak kolapso-funtzionalitatean konektatzeko gertaera batzuk erakusten ditu.
Gertaera mota | Deskribapena |
---|---|
show.bs.collapse |
Gertaera hau berehala abiarazten da show instantzia-metodoa deitzen denean. |
shown.bs.collapse |
Gertaera hau tolesteko elementu bat erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). |
hide.bs.collapse |
Gertaera hau berehala abiarazten da hide metodoa deitzen denean. |
hidden.bs.collapse |
Gertaera hau tolesteko elementu bat erabiltzaileari ezkutatu zaionean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})