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ë shumëfishta

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 ndërrojë 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 te vetë elementi i 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 të Udhëzuesit të Praktikave të Autorimit ARIA - 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

Aktivizoni manualisht me:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Opsione

Meqenëse opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript, ju mund të shtoni një emër opsioni në data-bs-, si në data-bs-animation="{value}". Sigurohuni që të ndryshoni llojin e rastit të emrit të opsionit nga “ CamelCase ” në “ kebab-case ” kur kaloni opsionet përmes atributeve të të dhënave. Për shembull, përdorni data-bs-custom-class="beautifier"në vend të data-bs-customClass="beautifier".

Që nga Bootstrap 5.2.0, të gjithë komponentët mbështesin një atribut eksperimental të të dhënave të rezervuara data-bs-configqë mund të vendosë konfigurimin e thjeshtë të komponentit si një varg JSON. Kur një element ka data-bs-config='{"delay":0, "title":123}'dhe data-bs-title="456"atribute, titlevlera përfundimtare do të jetë 456dhe atributet e veçanta të të dhënave do të zëvendësojnë vlerat e dhëna në data-bs-config. Përveç kësaj, atributet ekzistuese të të dhënave janë në gjendje të strehojnë vlera JSON si data-bs-delay='{"show":0,"hide":150}'.

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:

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})