menuMDUIDocs
color_lens
È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Collapse

Il plugin Collapse viene utilizzato per comprimere o espandere blocchi di contenuto.

Il plugin stesso non ha alcun stile, devi scriverlo tu stesso o usarlo insieme ad altri componenti.

Modalità d'uso

  1. (Se il componente è generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione)
  2. Chiamata via JavaScript

Struttura HTML

Questa è la struttura HTML più basilare:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

L'aggiunta della classe .mdui-collapse-item-open può far sì che il blocco di contenuto sia espanso per impostazione predefinita:

<div class="mdui-collapse">
  <div class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Gli elementi che contengono la classe .mdui-collapse-item-arrow verranno ruotati di 180 gradi quando il blocco di contenuto viene espanso:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <div class="mdui-collapse-item-arrow"></div>
    </div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Modalità d'uso

Chiamata via attributi

All'elemento <div class="mdui-collapse"></div> aggiungendo l'attributo mdui-collapse="options", non è necessario scrivere codice JavaScript per attivare il plugin.

Se l'elemento è generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.

codeplay_arrow
Esempio
<div class="mdui-collapse" mdui-collapse>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item1</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item1 content</p>
      <p>item1 content</p>
      <p>item1 content</p>

      <!-- Elementi annidati -->
      <div class="mdui-collapse" mdui-collapse>
        <div class="mdui-collapse-item">
          <div class="mdui-collapse-item-header">
            <p><a href="javascript:;">subitem1</a></p>
          </div>
          <div class="mdui-collapse-item-body">
            <p>subitem1 content</p>
            <p>subitem1 content</p>
            <p>subitem1 content</p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item2</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item2 content</p>
      <p>item2 content</p>
      <p>item2 content</p>
    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item3</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item3 content</p>
      <p>item3 content</p>
      <p>item3 content</p>
    </div>
  </div>

</div>

Alcuni attributi possono essere aggiunti agli elementi all'interno del Collapse per collegare eventi; questi attributi possono essere utilizzati anche quando si utilizza il metodo di chiamata JavaScript.

AttributoDescrizione
mdui-collapse-item-closeFacendo clic su questo elemento si attiverà l'evento close.mdui.collapse e si chiuderà il pannello in cui si trova l'elemento.

Chiamata via JavaScript

Istanzia il plugin:

// selector è il selettore CSS dell'elemento o l'elemento DOM
// options sono i parametri del plugin, vedi l'elenco dei parametri qui sotto
var inst = new mdui.Collapse(selector, options);
demo

Parametro

NomeTipoPredefinitoDescrizione
accordionbooleanfalseSe abilitare l'effetto a fisarmonica (accordion).
  • Se impostato su true, può essere aperto al massimo un blocco di contenuto; l'apertura di un blocco di contenuto chiuderà gli altri blocchi di contenuto.
  • Se impostato su false, è possibile aprire più blocchi di contenuto contemporaneamente.

Metodo

Nome metodoDescrizione
open(item)Apre il blocco di contenuto.
  • item: numero di indice, elemento DOM o selettore CSS del blocco di contenuto.
close(item)Chiude il blocco di contenuto.
  • item: numero di indice, elemento DOM o selettore CSS del blocco di contenuto.
toggle(item)Alterna lo stato del blocco di contenuto.
  • item: numero di indice, elemento DOM o selettore CSS del blocco di contenuto.
openAll()Apre tutti i blocchi di contenuto. Questo metodo è valido solo se accordion è false.
closeAll()Chiude tutti i blocchi di contenuto.

Evento

Nome eventoDescrizioneTargetParametri
open.mdui.collapseL'evento verrà attivato quando il blocco di contenuto inizia l'animazione di apertura.<div class="mdui-collapse-item"></div>event._detail.inst: istanza
opened.mdui.collapseL'evento verrà attivato quando il blocco di contenuto termina l'animazione di apertura.
close.mdui.collapseL'evento verrà attivato quando il blocco di contenuto inizia l'animazione di chiusura.
closed.mdui.collapseL'evento verrà attivato quando il blocco di contenuto termina l'animazione di chiusura.

Altri esempi

Sottolista

code
Esempio
<ul class="mdui-list" mdui-collapse="{accordion: true}">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
    <div class="mdui-list-item-content">Home</div>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
    <div class="mdui-list-item-content">Dashboard</div>
  </li>

  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Pages</li>
      <li class="mdui-list-item mdui-ripple">Landing Pages</li>
      <li class="mdui-list-item mdui-ripple">Exit Pages</li>
    </ul>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">shopping_cart</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>
arrow_backPrevious
Progress
arrow_forwardNext
Headroom