Kollapse

Hvordan det fungerer

Skjul JavaScript-pluginen brukes til å vise og skjule innhold. Knapper eller ankere brukes som utløsere som er tilordnet spesifikke elementer du veksler mellom. Hvis du skjuler et element, animeres det heightfra gjeldende verdi til 0. Gitt hvordan CSS håndterer animasjoner, kan du ikke bruke paddingpå et .collapseelement. Bruk i stedet klassen som et uavhengig innpakningselement.

Eksempel

Klikk på knappene nedenfor for å vise og skjule et annet element via klasseendringer:

• .collapseskjuler innhold
• .collapsingbrukes under overganger
• .collapse.showviser innhold

Generelt anbefaler vi å bruke en knapp med data-bs-targetattributtet. Selv om det ikke anbefales fra et semantisk synspunkt, kan du også bruke en lenke med hrefattributtet (og en role="button"). I begge tilfeller er det data-bs-toggle="collapse"nødvendig.

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

Horisontal

Kollaps-pluginen støtter også horisontal kollaps. Legg til .collapse-horizontalmodifikatorklassen for å overføre i widthstedet for heightog angi en widthpå det umiddelbare underordnede elementet. Skriv gjerne din egen tilpassede Sass, bruk innebygde stiler eller bruk breddeverktøyene våre .

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

Flere mål

En <button>eller <a>kan vise og skjule flere elementer ved å referere til dem med en velger i sin hrefeller data-bs-targetattributt. Flere <button>eller <a>kan vise og skjule et element hvis de refererer til det med sitt hrefeller data-bs-targetattributt

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

tilgjengelighet

Sørg for å legge aria-expandedtil kontrollelementet. Dette attributtet formidler eksplisitt den nåværende tilstanden til det sammenleggbare elementet knyttet til kontrollen til skjermlesere og lignende hjelpeteknologier. Hvis det sammenleggbare elementet er lukket som standard, skal attributtet på kontrollelementet ha en verdi på aria-expanded="false". Hvis du har satt det sammenleggbare elementet til å være åpent som standard ved hjelp av showklassen, sett aria-expanded="true"på kontrollen i stedet. Programtillegget vil automatisk veksle mellom dette attributtet på kontrollen basert på om det sammenleggbare elementet har blitt åpnet eller lukket (via JavaScript, eller fordi brukeren utløste et annet kontrollelement også knyttet til det samme sammenleggbare elementet). Hvis kontrollelementets HTML-element ikke er en knapp (f.eks. en <a>eller <div>), attributtetrole="button"skal legges til elementet.

Hvis kontrollelementet ditt målretter mot et enkelt sammenleggbart element – ​​dvs. at data-bs-targetattributtet peker til en idvelger – bør du legge til aria-controlsattributtet til kontrollelementet, som inneholder iddet sammenleggbare elementet. Moderne skjermlesere og lignende hjelpeteknologier bruker dette attributtet for å gi brukere ekstra snarveier for å navigere direkte til selve det sammenleggbare elementet.

Merk at Bootstraps nåværende implementering ikke dekker de ulike valgfrie tastaturinteraksjonene beskrevet i ARIA Authoring Practices Guide trekkspillmønsteret - du må inkludere disse selv med tilpasset JavaScript.

Sass

Variabler

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

Klasser

Kollapsovergangsklasser kan finnes i scss/_transitions.scssda disse deles på tvers av flere komponenter (kollaps og trekkspill).

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

Bruk

Kollaps-pluginen bruker noen få klasser for å håndtere tunge løft:

• .collapseskjuler innholdet
• .collapse.showviser innholdet
• .collapsinglegges til når overgangen starter, og fjernes når den er ferdig

Disse klassene finner du i _transitions.scss.

Via dataattributter

Bare legg til data-bs-toggle="collapse"og a data-bs-targettil elementet for automatisk å tildele kontroll over ett eller flere sammenleggbare elementer. Attributtet data-bs-targetgodtar en CSS-velger å bruke sammenbruddet på. Sørg for å legge klassen collapsetil det sammenleggbare elementet. Hvis du vil at den skal åpnes som standard, legger du til den ekstra klassen show.

For å legge til trekkspilllignende gruppestyring til et sammenleggbart område, legg til dataattributtet data-bs-parent="#selector". Se trekkspillsiden for mer informasjon.

Via JavaScript

Aktiver manuelt med:

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

Alternativer

Siden alternativer kan sendes via dataattributter eller JavaScript, kan du legge til et alternativnavn til data-bs-, som i data-bs-animation="{value}". Sørg for å endre sakstypen for alternativnavnet fra " camelCase " til " kebab-case " når du sender alternativene via dataattributter. Bruk for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".

Fra Bootstrap 5.2.0 støtter alle komponenter et eksperimentelt reservert dataattributt data-bs-configsom kan inneholde enkel komponentkonfigurasjon som en JSON-streng. Når et element har data-bs-config='{"delay":0, "title":123}'og data-bs-title="456"attributter, vil den endelige titleverdien være 456og de separate dataattributtene vil overstyre verdier gitt på data-bs-config. I tillegg kan eksisterende dataattributter inneholde JSON-verdier som data-bs-delay='{"show":0,"hide":150}'.

Metoder

Aktiverer innholdet ditt som et sammenleggbart element. Godtar et valgfritt alternativ object.

Du kan opprette en kollapsforekomst med konstruktøren, for eksempel:

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

arrangementer

Bootstraps kollapsklasse avslører noen få hendelser for å koble seg til kollapsfunksjonalitet.

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