Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
in English

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ë heightnga vlera e tij aktuale në 0. Duke pasur parasysh se si CSS trajton animacionet, nuk mund të përdorni paddingnë një .collapseelement. Në vend të kësaj, përdorni klasën si një element mbështjellës të pavarur.

Efekti i animacionit të këtij komponenti varet nga prefers-reduced-motionpyetja 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:

  • .collapsefsheh përmbajtjen
  • .collapsingzbatohet gjatë tranzicionit
  • .collapse.showtregon përmbajtjen

Në përgjithësi, ne rekomandojmë përdorimin e një butoni me data-bs-targetatributin. Megjithëse nuk rekomandohet nga pikëpamja semantike, mund të përdorni gjithashtu një lidhje me hrefatributin (dhe a role="button"). Në të dyja rastet, data-bs-toggle="collapse"kërkohet.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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 hrefose . data-bs-targetShumëfish <button>ose <a>mund të shfaqin dhe fshehin një element nëse secili e referon atë me atributin e tij hrefosedata-bs-target

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.
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.
<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-expandednë 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 showklasë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-targetatributi drejton një idpërzgjedhës – duhet të shtoni aria-controlsatributin në elementin e kontrollit, që përmban idelementin 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.scsspasi 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ë:

  • .collapsefsheh përmbajtjen
  • .collapse.showtregon përmbajtjen
  • .collapsingshtohet 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-targetnë element për të caktuar automatikisht kontrollin e një ose më shumë elementeve të palosshme. Atributi data-bs-targetpranon një përzgjedhës CSS për të aplikuar kolapsin. Sigurohuni që të shtoni klasën collapsenë 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 cardklasa). 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.collapseose ).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.collapsendodhë 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.collapsendodhë 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 showthirret 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 hidemetoda ë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...
})