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

Pannello pieghevole

Modalità d'uso

Il dialog in mdui è un componente molto versatile, spesso utilizzato per richiedere informazioni all'utente, notificare o avvertire.
Chiamata via JavaScript

Letture correlate

Può essere visualizzato un solo dialog alla volta. Se viene aperto un nuovo dialog prima che quello corrente sia chiuso, il nuovo dialog verrà aggiunto a una coda e aperto dopo la chiusura di quello corrente.

Stile

Linee guida di design Material Design: Componenti - Dialog

Dialog predefiniti

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>

Dialog standard

Questo è un dialog standard.

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>

Senza barra del titolo

Questo dialog non contiene una barra del titolo.

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>

Pulsanti verticali

I pulsanti in fondo al dialog sono disposti orizzontalmente per impostazione predefinita. Basta all'elemento <div class="mdui-dialog-actions"></div> aggiungere la classe .mdui-dialog-actions-stacked per disporli verticalmente.

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>

Titolo e pulsanti fissi

Quando il contenuto del dialog supera l'altezza del dialog stesso, il contenuto in .mdui-dialog-content genererà una barra di scorrimento.

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>

Contenuto personalizzato

Se <code>.mdui-dialog-title</code> e <code>.mdui-dialog-actions</code> sono inseriti all'interno di <code>.mdui-dialog-content</code>, il titolo e i pulsanti inferiori scorreranno insieme al contenuto; in caso contrario, rimarranno fissi rispettivamente in alto e in basso.

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>

      <!-- Solo <code>&lt;div class=&quot;mdui-dialog&quot;&gt;&lt;/div&gt;</code> è obbligatorio nel dialog; il contenuto all'interno può essere sostituito con qualsiasi HTML. -->
      <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>

            <!-- Nell'esempio seguente, un tab è inserito all'interno del dialog: -->
            <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 di controllo (ad esempio: un pulsante) l'attributo mdui-dialog="options". Quando si chiama tramite attributi personalizzati, è necessario aggiungere il parametro target per specificare il dialog da controllare; il valore è il selettore CSS del dialog.

È possibile aggiungere attributi agli elementi all'interno del dialog per legare eventi; questi attributi possono essere utilizzati anche quando si chiama tramite JavaScript.

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>

Facendo clic su questo elemento verrà attivato l'evento <code>close.mdui.dialog</code> e il dialog verrà chiuso.

Attributo	Descrizione
`mdui-panel-item-close`	Facendo clic su questo elemento verrà attivato l'evento `cancel.mdui.dialog`.

Chiamata via JavaScript

Facendo clic su questo elemento verrà attivato l'evento <code>confirm.mdui.dialog</code>.

// Istanziazione del componente:
// selector è il selettore CSS del dialog, un elemento DOM o una stringa HTML
var inst = new mdui.Panel(selector, options);

Esegui

Parametro

Nome	Tipo	Predefinito	Descrizione
`accordion`	`boolean`	`false`	options è l'oggetto di configurazione, vedi l'elenco dei parametri qui sotto Indica se visualizzare una maschera (overlay) all'apertura del dialog. Indica se aggiungere un hash all'URL all'apertura del dialog. Se impostato su true, il dialog potrà essere chiuso tramite il pulsante "Indietro" del browser o del dispositivo Android.

Metodo

Nome metodo	Descrizione
`open(item)`	Indica se rendere il dialog modale. Se impostato su false, il dialog verrà chiuso facendo clic all'esterno di esso. Indica se chiudere il dialog quando viene premuto il tasto Esc.
`close(item)`	Indica se chiudere il dialog quando viene premuto il pulsante Annulla. Indica se chiudere il dialog quando viene premuto il pulsante Conferma.
`toggle(item)`	Indica se distruggere automaticamente il dialog dopo la chiusura. Apre il dialog.
`openAll()`	Chiude il dialog.
`closeAll()`	Alterna lo stato di apertura del dialog.

Evento

Nome evento	Descrizione	Target	Parametri
`open.mdui.panel`	Ottiene lo stato del dialog. Include quattro stati (<code>opening</code>, <code>opened</code>, <code>closing</code>, <code>closed</code>).	`<div class="mdui-panel-item"></div>`	Distrugge il dialog.
`opened.mdui.panel`	Riposiziona il dialog e ricalcola l'altezza della barra di scorrimento. Da chiamare se il contenuto del dialog viene modificato dopo l'apertura.
`close.mdui.panel`	L'evento viene attivato quando inizia l'animazione di apertura del dialog.
`closed.mdui.panel`	<code>event._detail.inst</code>: istanza

Elenco classi CSS

Nome classe	Descrizione
`.mdui-panel`	L'evento viene attivato quando termina l'animazione di apertura del dialog.
`.mdui-panel-gapless`	L'evento viene attivato quando inizia l'animazione di chiusura del dialog.
`.mdui-panel-popout`	L'evento viene attivato quando termina l'animazione di chiusura del dialog.
`.mdui-panel-item`	L'evento viene attivato quando viene premuto il pulsante Annulla.
`.mdui-panel-item-open`	L'evento viene attivato quando viene premuto il pulsante Conferma.
`.mdui-panel-item-header`	mdui fornisce diverse funzioni di dialog predefinite per scenari comuni; questi dialog vengono chiamati solo tramite JavaScript e non richiedono la scrittura di codice HTML.
`.mdui-panel-item-title`	Tutte queste funzioni restituiscono l'istanza del dialog.
`.mdui-panel-item-summary`	Apre un dialog con titolo, contenuto e pulsanti personalizzabili. Questo metodo è generico; <code>mdui.alert()</code>, <code>mdui.confirm()</code> e <code>mdui.prompt()</code> sono basati su questo metodo.
`.mdui-panel-item-arrow`	Titolo del dialog.
`.mdui-panel-item-body`	Contenuto del dialog.
`.mdui-panel-item-actions`	Array di pulsanti, ogni pulsante è un oggetto con i parametri del pulsante (vedi tabella sotto).

Divider

Text Field