Kolapsi
Ndryshoni dukshmërinë e përmbajtjes në projektin tuaj me disa klasa dhe shtojcat tona JavaScript.
Si punon
Shtojca e kolapsit JavaScript përdoret për të shfaqur dhe fshehur përmbajtjen. Butonat ose ankorat përdoren si shkas që janë të lidhur me elementë specifikë që ndërroni. Kolapsimi i një elementi do të animojë height
nga vlera e tij aktuale në 0
. Duke pasur parasysh se si CSS trajton animacionet, nuk mund të përdorni padding
në një .collapse
element. Në vend të kësaj, përdorni klasën si një element mbështjellës të pavarur.
prefers-reduced-motion
pyetja e medias. Shikoni
seksionin e lëvizjes së reduktuar të dokumentacionit tonë të aksesueshmërisë .
Shembull
Klikoni butonat më poshtë për të shfaqur dhe fshehur një element tjetër nëpërmjet ndryshimeve të klasës:
.collapse
fsheh përmbajtjen.collapsing
zbatohet gjatë tranzicionit.collapse.show
tregon përmbajtjen
Në përgjithësi, ne rekomandojmë përdorimin e një butoni me data-bs-target
atributin. Megjithëse nuk rekomandohet nga pikëpamja semantike, mund të përdorni gjithashtu një lidhje me href
atributin (dhe a role="button"
). Në të dyja rastet, data-bs-toggle="collapse"
kërkohet.
<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>
Objektiva të shumtë
A <button>
ose <a>
mund të shfaqë dhe fshehë elementë të shumtë duke i referuar me një përzgjedhës në atributin e tij href
ose . data-bs-target
Shumëfish <button>
ose <a>
mund të shfaqin dhe fshehin një element nëse secili e referon atë me atributin e tij href
osedata-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>
Aksesueshmëria
Sigurohuni që të shtoni aria-expanded
në elementin e kontrollit. Ky atribut përcjell në mënyrë eksplicite gjendjen aktuale të elementit të palosshëm të lidhur me kontrollin e lexuesve të ekranit dhe teknologjive të ngjashme ndihmëse. Nëse elementi i palosshëm mbyllet si parazgjedhje, atributi në elementin e kontrollit duhet të ketë një vlerë prej aria-expanded="false"
. Nëse keni vendosur që elementi i palosshëm të jetë i hapur si parazgjedhje duke përdorur show
klasën, vendoseni aria-expanded="true"
në kontrollin në vend të kësaj. Shtojca do ta ndryshojë automatikisht këtë atribut në kontroll bazuar në faktin nëse elementi i palosshëm është hapur ose mbyllur (nëpërmjet JavaScript, ose sepse përdoruesi ka aktivizuar një element tjetër kontrolli të lidhur gjithashtu me të njëjtin element të palosshëm). Nëse elementi HTML i elementit të kontrollit nuk është një buton (p.sh., një <a>
ose <div>
), atributirole="button"
duhet t'i shtohet elementit.
Nëse elementi juaj i kontrollit synon një element të vetëm të palosshëm – dmth. data-bs-target
atributi drejton një id
përzgjedhës – duhet të shtoni aria-controls
atributin në elementin e kontrollit, që përmban id
elementin e palosshëm. Lexuesit modernë të ekranit dhe teknologjitë e ngjashme ndihmëse përdorin këtë atribut për t'u ofruar përdoruesve shkurtore shtesë për të lundruar drejtpërdrejt në vetë elementin e palosshëm.
Vini re se zbatimi aktual i Bootstrap nuk mbulon ndërveprimet e ndryshme opsionale të tastierës të përshkruara në modelin e fizarmonikës WAI-ARIA Authoring Practices 1.1 - do t'ju duhet t'i përfshini vetë këto me JavaScript të personalizuar.
Sass
Variablat
$transition-collapse: height .35s ease;
Klasat
Klasat e tranzicionit të kolapsit mund të gjenden në scss/_transitions.scss
pasi ato ndahen në disa komponentë (kolapsi dhe fizarmonikë).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Përdorimi
Shtojca e kolapsit përdor disa klasa për të trajtuar ngritjen e rëndë:
.collapse
fsheh përmbajtjen.collapse.show
tregon përmbajtjen.collapsing
shtohet kur fillon tranzicioni dhe hiqet kur përfundon
Këto klasa mund të gjenden në _transitions.scss
.
Nëpërmjet atributeve të të dhënave
Thjesht shtoni data-bs-toggle="collapse"
dhe a data-bs-target
në element për të caktuar automatikisht kontrollin e një ose më shumë elementeve të palosshme. Atributi data-bs-target
pranon një përzgjedhës CSS për të aplikuar kolapsin. Sigurohuni që të shtoni klasën collapse
në elementin e palosshëm. Nëse dëshironi që të hapet si parazgjedhje, shtoni klasën shtesë show
.
Për të shtuar menaxhimin e grupit të ngjashëm me fizarmonikën në një zonë të palosshme, shtoni atributin e të dhënave data-bs-parent="#selector"
. Referojuni demonstrimit për ta parë këtë në veprim.
Përmes JavaScript
Aktivizo manualisht me:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Opsione
Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-bs-
, si në data-bs-parent=""
.
Emri | Lloji | E paracaktuar | Përshkrim |
---|---|---|---|
parent |
përzgjedhës | Objekti jQuery | Elementi DOM | false |
Nëse ofrohet prindi, atëherë të gjithë elementët e palosshëm nën prindin e specifikuar do të mbyllen kur të shfaqet ky artikull i palosshëm. (e ngjashme me sjelljen tradicionale të fizarmonikës - kjo varet nga card klasa). Atributi duhet të vendoset në zonën e synuar të palosshme. |
toggle |
logjike | true |
Aktivizon elementin e palosshëm në thirrje |
Metodat
Metodat dhe tranzicionet asinkrone
Të gjitha metodat API janë asinkrone dhe fillojnë një tranzicion . Ata kthehen te thirrësi sapo të fillojë tranzicioni, por para se të përfundojë . Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të injorohet .
Shikoni dokumentacionin tonë JavaScript për më shumë informacion .
Aktivizon përmbajtjen tuaj si një element i palosshëm. Pranon një opsion opsional object
.
Mund të krijoni një shembull kolapsi me konstruktorin, për shembull:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Metoda | Përshkrim |
---|---|
toggle |
Ndryshon një element të palosshëm në të shfaqur ose të fshehur. Kthehet te thirrësi përpara se elementi i palosshëm të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.collapse ose ).hidden.bs.collapse |
show |
Tregon një element të palosshëm. Kthehet te thirrësi përpara se elementi i palosshëm të shfaqet (p.sh., përpara se të shown.bs.collapse ndodhë ngjarja). |
hide |
Fsheh një element të palosshëm. Kthehet te thirrësi përpara se elementi i palosshëm të jetë fshehur në të vërtetë (p.sh., përpara se të hidden.bs.collapse ndodhë ngjarja). |
dispose |
Shkatërron kolapsin e një elementi. (Heq të dhënat e ruajtura në elementin DOM) |
getInstance |
Metoda statike e cila ju lejon të merrni shembullin e kolapsit të lidhur me një element DOM, mund ta përdorni si kjo:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Metoda statike e cila kthen një shembull kolapsi të lidhur me një element DOM ose krijon një të ri në rast se nuk ishte inicializuar. Mund ta përdorni si kjo:bootstrap.Collapse.getOrCreateInstance(element) |
Ngjarjet
Klasa e kolapsit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e kolapsit.
Lloji i ngjarjes | Përshkrim |
---|---|
show.bs.collapse |
Kjo ngjarje ndizet menjëherë kur show thirret metoda e shembullit. |
shown.bs.collapse |
Kjo ngjarje aktivizohet kur një element kolapsi është bërë i dukshëm për përdoruesin (do të presë që kalimet CSS të përfundojnë). |
hide.bs.collapse |
Kjo ngjarje aktivizohet menjëherë kur hide metoda është thirrur. |
hidden.bs.collapse |
Kjo ngjarje aktivizohet kur një element kolapsi është fshehur nga përdoruesi (do të presë që tranzicioni i CSS të përfundojë). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})