Crollo

Come funziona

Il plug-in JavaScript di compressione viene utilizzato per mostrare e nascondere il contenuto. I pulsanti o gli ancoraggi vengono utilizzati come attivatori che vengono mappati su elementi specifici che si attivano. La compressione di un elemento animerà il heightdal suo valore corrente a 0. Dato il modo in cui CSS gestisce le animazioni, non puoi usarle paddingsu un .collapseelemento. Utilizzare invece la classe come elemento di avvolgimento indipendente.

Esempio

Fai clic sui pulsanti sottostanti per mostrare e nascondere un altro elemento tramite i cambi di classe:

• .collapsenasconde il contenuto
• .collapsingviene applicato durante le transizioni
• .collapse.showmostra il contenuto

In genere, si consiglia di utilizzare un pulsante con l' data-bs-targetattributo. Sebbene non sia consigliato da un punto di vista semantico, puoi anche utilizzare un collegamento con l' hrefattributo (e a role="button"). In entrambi i casi data-bs-toggle="collapse"è richiesto.

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

Orizzontale

Il plug-in di compressione supporta anche la compressione orizzontale. Aggiungi la .collapse-horizontalclasse modificatore per passare a widthinvece di heighte imposta a widthsull'elemento figlio immediato. Sentiti libero di scrivere il tuo Sass personalizzato, utilizzare gli stili in linea o utilizzare le nostre utilità di larghezza .

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

Obiettivi multipli

Un <button>o <a>può mostrare e nascondere più elementi facendo riferimento ad essi con un selettore nel relativo attributo hrefo . data-bs-targetMultiplo <button>o <a>può mostrare e nascondere un elemento se ciascuno di essi vi fa riferimento con il proprio attributo hrefodata-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>

Accessibilità

Assicurati di aggiungere aria-expandedall'elemento di controllo. Questo attributo trasmette esplicitamente lo stato attuale dell'elemento comprimibile legato al controllo a lettori di schermo e tecnologie assistive simili. Se l'elemento comprimibile è chiuso per impostazione predefinita, l'attributo sull'elemento di controllo dovrebbe avere un valore di aria-expanded="false". Se hai impostato l'elemento comprimibile in modo che sia aperto per impostazione predefinita usando la showclasse, impostalo aria-expanded="true"invece sul controllo. Il plug-in attiverà automaticamente questo attributo sul controllo in base al fatto che l'elemento comprimibile sia stato aperto o chiuso o meno (tramite JavaScript o perché l'utente ha attivato un altro elemento di controllo anch'esso legato allo stesso elemento comprimibile). Se l'elemento HTML dell'elemento di controllo non è un pulsante (ad esempio, an <a>o <div>), l'attributorole="button"deve essere aggiunto all'elemento.

Se il tuo elemento di controllo ha come target un singolo elemento comprimibile, ovvero l' data-bs-targetattributo punta a un idselettore, dovresti aggiungere l' aria-controlsattributo all'elemento di controllo, contenente l' idelemento comprimibile. I moderni lettori di schermo e tecnologie assistive simili utilizzano questo attributo per fornire agli utenti scorciatoie aggiuntive per navigare direttamente all'elemento comprimibile stesso.

Nota che l'attuale implementazione di Bootstrap non copre le varie interazioni opzionali con la tastiera descritte nel pattern a fisarmonica di ARIA Authoring Practices Guide : dovrai includerle tu stesso con JavaScript personalizzato.

Sass

Variabili

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

Classi

Le classi di transizione di collasso possono essere trovate in scss/_transitions.scssquanto queste sono condivise tra più componenti (collasso e fisarmonica).

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

Utilizzo

Il plugin di compressione utilizza alcune classi per gestire il sollevamento di carichi pesanti:

• .collapsenasconde il contenuto
• .collapse.showmostra il contenuto
• .collapsingviene aggiunto all'inizio della transizione e rimosso al termine

Queste classi possono essere trovate in _transitions.scss.

Tramite attributi di dati

Basta aggiungere data-bs-toggle="collapse"e data-bs-targeta all'elemento per assegnare automaticamente il controllo di uno o più elementi comprimibili. L' data-bs-targetattributo accetta un selettore CSS a cui applicare la compressione. Assicurati di aggiungere la classe collapseall'elemento comprimibile. Se desideri che sia aperto di default, aggiungi la classe aggiuntiva show.

Per aggiungere la gestione dei gruppi a fisarmonica a un'area comprimibile, aggiungi l'attributo data data-bs-parent="#selector". Fare riferimento alla pagina della fisarmonica per ulteriori informazioni.

Tramite JavaScript

Abilita manualmente con:

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

Opzioni

Poiché le opzioni possono essere passate tramite attributi di dati o JavaScript, puoi aggiungere un nome di opzione a data-bs-, come in data-bs-animation="{value}". Assicurati di cambiare il tipo di caso del nome dell'opzione da " camelCase " a " kebab-case " quando passi le opzioni tramite attributi di dati. Ad esempio, utilizzare data-bs-custom-class="beautifier"invece di data-bs-customClass="beautifier".

A partire da Bootstrap 5.2.0, tutti i componenti supportano un attributo di dati riservato sperimentaledata-bs-config che può ospitare una semplice configurazione del componente come una stringa JSON. Quando un elemento ha data-bs-config='{"delay":0, "title":123}'e data-bs-title="456"attributi, il titlevalore finale sarà 456e gli attributi di dati separati sovrascriveranno i valori forniti su data-bs-config. Inoltre, gli attributi di dati esistenti sono in grado di ospitare valori JSON come data-bs-delay='{"show":0,"hide":150}'.

Metodi

Attiva il tuo contenuto come elemento comprimibile. Accetta opzioni opzionali object.

Puoi creare un'istanza di compressione con il costruttore, ad esempio:

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

Eventi

La classe di compressione di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità di compressione.

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