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

Pannello pieghevole

Modalità d'uso

Chiamata tramite attributi personalizzati (se il componente è generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione)
Chiamata via JavaScript

Letture correlate

Linee guida di design Material Design: Componenti - Pannello di espansione (Expansion Panel)

Stile

Struttura HTML completa

Questo esempio include tutti gli elementi HTML che possono essere inclusi.

Esempio

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Trip name</div>
      <div class="mdui-panel-item-summary">Carribean cruise</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Location</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Start and end dates</div>
      <div class="mdui-panel-item-summary">Start date: Feb 29, 2016</div>
      <div class="mdui-panel-item-summary">End date: Not set</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

</div>

Struttura HTML minima

Alcuni elementi nell'esempio sopra non sono necessari; l'esempio seguente contiene solo gli elementi HTML richiesti.

Esempio

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Elemento del pannello aperto per impostazione predefinita

Nell'elemento <div class="mdui-panel-item"></div> aggiungi la classe .mdui-panel-item-open per rendere l'elemento del pannello aperto per impostazione predefinita.

Esempio

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item mdui-panel-item-open">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Rimuovere la spaziatura del pannello

Nell'elemento <div class="mdui-panel"></div> aggiungi la classe .mdui-panel-gapless per rimuovere la spaziatura tra il pannello aperto e gli altri pannelli.

Esempio

<div class="mdui-panel mdui-panel-gapless" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Pannello popout

Nell'elemento <div class="mdui-panel"></div> aggiungi la classe .mdui-panel-popout per dare al pannello aperto un effetto popout.

Esempio

<div class="mdui-panel mdui-panel-popout" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Pannelli annidati

I pannelli a soffietto possono essere annidati l'uno nell'altro.

Esempio

<div class="mdui-panel" mdui-panel>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>

      <!-- Primo pannello annidato -->
      <div class="mdui-panel" mdui-panel>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">First</div>
          <div class="mdui-panel-item-body">
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>

            <!-- Secondo pannello annidato -->
            <div class="mdui-panel" mdui-panel>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">First</div>
                <div class="mdui-panel-item-body">
                  <p>First content</p>
                  <p>First content</p>
                  <p>First content</p>
                </div>
              </div>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Second</div>
                <div class="mdui-panel-item-body">
                  <p>Second content</p>
                  <p>Second content</p>
                  <p>Second content</p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">Second</div>
          <div class="mdui-panel-item-body">
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

Modalità d'uso

Chiamata via attributi

Usando questo metodo non è necessario scrivere codice JavaScript. Basta aggiungere all'elemento <div class="mdui-panel"></div> l'attributo mdui-panel="options" per attivare il plugin.

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

Esempio

<div class="mdui-panel" mdui-panel="{accordion: true}">
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

È possibile aggiungere alcuni attributi agli elementi all'interno del pannello per collegare eventi; questi attributi possono essere utilizzati anche quando si utilizza il metodo di chiamata JavaScript.

Attributo	Descrizione
`mdui-panel-item-close`	Facendo clic su questo elemento si attiverà l'evento `close.mdui.panel` e si chiuderà l'elemento del pannello in cui si trova l'elemento.

Chiamata via JavaScript

Istanziare il componente:

// selector è il selettore CSS o l'elemento DOM dell'elemento .mdui-panel
// options sono i parametri del plugin, vedere l'elenco dei parametri di seguito
var inst = new mdui.Panel(selector, options);

Esegui

Parametro

Nome	Tipo	Predefinito	Descrizione
`accordion`	`boolean`	`false`	Indica se abilitare l'effetto a fisarmonica (accordion). Quando è `true`, può essere aperto al massimo un elemento del pannello alla volta; l'apertura di un elemento chiuderà gli altri. Quando è `false`, è possibile aprire più elementi del pannello contemporaneamente.

Metodo

Nome metodo	Descrizione
`open(item)`	Apri l'elemento del pannello. `item`: numero dell'indice, elemento DOM o selettore CSS dell'elemento del pannello.
`close(item)`	Chiudi l'elemento del pannello. `item`: numero dell'indice, elemento DOM o selettore CSS dell'elemento del pannello.
`toggle(item)`	Commuta lo stato dell'elemento del pannello. `item`: numero dell'indice, elemento DOM o selettore CSS dell'elemento del pannello.
`openAll()`	Apri tutti gli elementi del pannello. Questo metodo è valido solo quando `accordion` è `false`.
`closeAll()`	Chiudi tutti gli elementi del pannello.

Evento

Nome evento	Descrizione	Target	Parametri
`open.mdui.panel`	L'evento verrà attivato quando l'elemento del pannello inizia l'animazione di apertura.	`<div class="mdui-panel-item"></div>`	`event._detail.inst`: Istanza
`opened.mdui.panel`	L'evento verrà attivato quando l'elemento del pannello termina l'animazione di apertura.
`close.mdui.panel`	L'evento verrà attivato quando l'elemento del pannello inizia l'animazione di chiusura.
`closed.mdui.panel`	L'evento verrà attivato quando l'elemento del pannello termina l'animazione di chiusura.

Elenco classi CSS

Nome classe	Descrizione
`.mdui-panel`	Definisce un pannello a soffietto.
`.mdui-panel-gapless`	Rimuove la spaziatura tra il pannello aperto e gli altri pannelli.
`.mdui-panel-popout`	Conferisce al pannello aperto un effetto popout.
`.mdui-panel-item`	Definisce un elemento del pannello all'interno di un pannello a soffietto.
`.mdui-panel-item-open`	Rende l'elemento del pannello aperto per impostazione predefinita.
`.mdui-panel-item-header`	Definisce l'intestazione di un elemento del pannello.
`.mdui-panel-item-title`	Definisce il titolo dell'intestazione di un elemento del pannello.
`.mdui-panel-item-summary`	Definisce il riepilogo dell'intestazione di un elemento del pannello.
`.mdui-panel-item-arrow`	Definisce l'icona di espansione/contrazione dell'elemento del pannello.
`.mdui-panel-item-body`	Definisce il contenuto dell'elemento del pannello.
`.mdui-panel-item-actions`	Definisce la barra delle azioni dell'elemento del pannello.

Divider

Text Field