Kolapsi

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.

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.

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

Horizontale

Shtojca e kolapsit gjithashtu mbështet kolapsin horizontal. Shtoni .collapse-horizontalklasën e modifikuesit për të kaluar në widthvend të heightdhe vendosni a widthnë elementin fëmijë të menjëhershëm. Mos ngurroni të shkruani Sass-in tuaj të personalizuar, të përdorni stilet inline ose të përdorni shërbimet tona të gjerësisë .

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

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

<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;
$transition-collapse-width:   width .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);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

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 faqes së fizarmonikës për më shumë informacion.

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="".

Metodat

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

Ngjarjet

Klasa e kolapsit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e kolapsit.

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})