Inval

Hoe dit werk

Die JavaScript-inpropinvou word gebruik om inhoud te wys en te versteek. Knoppies of ankers word gebruik as snellers wat gekarteer word na spesifieke elemente wat jy wissel. Deur 'n element in te vou sal die heightvan sy huidige waarde na animeer 0. Gegewe hoe CSS animasies hanteer, kan jy nie paddingop 'n .collapseelement gebruik nie. Gebruik eerder die klas as 'n onafhanklike wikkelelement.

Voorbeeld

Klik op die knoppies hieronder om 'n ander element te wys en te versteek via klasveranderinge:

• .collapseverberg inhoud
• .collapsingword tydens oorgange toegepas
• .collapse.showinhoud toon

Oor die algemeen beveel ons aan om 'n knoppie met die data-bs-targetkenmerk te gebruik. Alhoewel dit nie aanbeveel word vanuit 'n semantiese oogpunt nie, kan jy ook 'n skakel met die hrefkenmerk (en 'n role="button") gebruik. In beide gevalle word die data-bs-toggle="collapse"vereis.

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

Horisontaal

Die ineenvou-inprop ondersteun ook horisontale ineenstorting. Voeg die .collapse-horizontalwysigerklas by om die oor te skakel widthin plaas van heighten stel 'n widthop die onmiddellike kind-element. Skryf gerus jou eie pasgemaakte Sass, gebruik inlynstyle, of gebruik ons ​​breedte-hulpmiddels .

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

Veelvuldige teikens

A <button>of <a>kan veelvuldige elemente wys en versteek deur hulle te verwys met 'n kieser in sy hrefof data-bs-targetkenmerk. Veelvuldige <button>of <a>kan 'n element wys en versteek as hulle elkeen daarna verwys met hul hrefof data-bs-targetkenmerk

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

Toeganklikheid

Maak seker dat jy aria-expandedby die beheerelement voeg. Hierdie eienskap dra eksplisiet die huidige toestand van die opvoubare element wat aan die beheer gekoppel is, oor aan skermlesers en soortgelyke ondersteunende tegnologieë. As die opvoubare element by verstek gesluit is, moet die kenmerk op die beheerelement 'n waarde van hê aria-expanded="false". As jy die opvoubare element gestel het om by verstek oop te wees deur die showklas te gebruik, stel aria-expanded="true"eerder op die kontrole. Die inprop sal hierdie kenmerk outomaties op die kontrole skakel, gebaseer op of die opvoubare element oop of toegemaak is of nie (via JavaScript, of omdat die gebruiker 'n ander beheerelement geaktiveer het wat ook aan dieselfde opvoubare element gekoppel is). As die beheerelement se HTML-element nie 'n knoppie is nie (bv. 'n <a>of <div>), die kenmerkrole="button"moet by die element gevoeg word.

As jou kontrole-element 'n enkele opvoubare element teiken – maw die data-bs-targetkenmerk wys na 'n idkieser – moet jy die aria-controlskenmerk by die beheerelement voeg, wat die idvan die opvoubare element bevat. Moderne skermlesers en soortgelyke ondersteunende tegnologieë maak gebruik van hierdie kenmerk om gebruikers van bykomende kortpaaie te voorsien om direk na die opvoubare element self te navigeer.

Let daarop dat Bootstrap se huidige implementering nie die verskillende opsionele sleutelbordinteraksies dek wat in die ARIA Authoring Practices Guide trekklavierpatroon beskryf word nie - jy sal dit self moet insluit met persoonlike JavaScript.

Sass

Veranderlikes

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Klasse

Ineenstortings-oorgangsklasse kan gevind word in scss/_transitions.scssaangesien dit oor verskeie komponente gedeel word (invou en trekklavier).

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

Gebruik

Die ineenstorting-inprop gebruik 'n paar klasse om die swaar opheffing te hanteer:

• .collapseverberg die inhoud
• .collapse.showwys die inhoud
• .collapsingword bygevoeg wanneer die oorgang begin, en verwyder wanneer dit klaar is

Hierdie klasse kan gevind word in _transitions.scss.

Via data-eienskappe

Voeg net data-bs-toggle="collapse"en a data-bs-targetby die element om outomaties beheer van een of meer opvoubare elemente toe te ken. Die data-bs-targetkenmerk aanvaar 'n CSS-kieser om die ineenstorting op toe te pas. Maak seker dat jy die klas collapseby die opvoubare element voeg. As jy wil hê dit moet verstek oopmaak, voeg die bykomende klas by show.

Om trekklavieragtige groepbestuur by 'n opvoubare area te voeg, voeg die data-kenmerk by data-bs-parent="#selector". Verwys na die trekklavierbladsy vir meer inligting.

Via JavaScript

Aktiveer handmatig met:

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

Opsies

Aangesien opsies deur data-kenmerke of JavaScript deurgegee kan word, kan jy 'n opsienaam byvoeg data-bs-, soos in data-bs-animation="{value}". Maak seker dat jy die kastipe van die opsienaam verander van " camelCase " na " kebab-case " wanneer die opsies deur data-kenmerke deurgegee word. Gebruik byvoorbeeld in data-bs-custom-class="beautifier"plaas van data-bs-customClass="beautifier".

Vanaf Bootstrap 5.2.0 ondersteun alle komponente 'n eksperimentele gereserveerde data-kenmerk data-bs-configwat eenvoudige komponentkonfigurasie as 'n JSON-string kan huisves. Wanneer 'n element data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"kenmerke het, sal die finale titlewaarde wees 456en die afsonderlike data-kenmerke sal waardes wat op gegee word, ignoreer data-bs-config. Daarbenewens kan bestaande data-kenmerke JSON-waardes soos data-bs-delay='{"show":0,"hide":150}'.

Metodes

Aktiveer jou inhoud as 'n opvoubare element. Aanvaar 'n opsionele opsie object.

Jy kan 'n ineenstortingsinstansie met die konstruktor skep, byvoorbeeld:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Gebeurtenisse

Bootstrap se ineenstortingsklas ontbloot 'n paar gebeurtenisse vir inhaak by ineenstortingsfunksionaliteit.

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