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

Dialog

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

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.

Modalità d'uso

Chiamata via attributi
Chiamata via JavaScript

Letture correlate

Linee guida di design Material Design: Componenti - Dialog

Stile

Dialog standard

Questo è un dialog standard.

Esempio

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">erase</button>
  </div>
</div>

Senza barra del titolo

Questo dialog non contiene una barra del titolo.

Esempio

<div class="mdui-dialog">
  <div class="mdui-dialog-content">Discard draft?</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">discard</button>
  </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-dialog">
  <div class="mdui-dialog-title">Use Google's location service?</div>
  <div class="mdui-dialog-content">Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div>
  <div class="mdui-dialog-actions mdui-dialog-actions-stacked">
    <button class="mdui-btn mdui-ripple">turn on speed boost</button>
    <button class="mdui-btn mdui-ripple">no thanks</button>
  </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.

Se .mdui-dialog-title e .mdui-dialog-actions sono inseriti all'interno di .mdui-dialog-content, 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-dialog">
  <div class="mdui-dialog-content">
    <div class="mdui-dialog-title">Use Google's location service?</div>
    Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
    <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test
  </div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">no thanks</button>
    <button class="mdui-btn mdui-ripple">turn on speeboost</button>
  </div>
</div>

Contenuto personalizzato

Solo <div class="mdui-dialog"></div> è obbligatorio nel dialog; il contenuto all'interno può essere sostituito con qualsiasi HTML.

Nell'esempio seguente, un tab è inserito all'interno del dialog:

Esempio

<div class="mdui-dialog" id="example-4">
  <div class="mdui-tab mdui-tab-full-width" id="example4-tab">
    <a href="#example4-tab1" class="mdui-ripple">web</a>
    <a href="#example4-tab2" class="mdui-ripple">shopping</a>
    <a href="#example4-tab3" class="mdui-ripple">videos</a>
  </div>
  <div id="example4-tab1" class="mdui-p-a-2">
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
  </div>
  <div id="example4-tab2" class="mdui-p-a-2">
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
  </div>
  <div id="example4-tab3" class="mdui-p-a-2">
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
  </div>
</div>

<script>
  var tab = new mdui.Tab('#example4-tab');
  document.getElementById('example-4').addEventListener('open.mdui.dialog', function () {
    tab.handleUpdate();
  });
</script>

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.

Esempio

<button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog="{target: '#exampleDialog'}">open</button>

<div class="mdui-dialog" id="exampleDialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" mdui-dialog-close>cancel</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>erase</button>
  </div>
</div>

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

Attributo	Descrizione
`mdui-dialog-close`	Facendo clic su questo elemento verrà attivato l'evento `close.mdui.dialog` e il dialog verrà chiuso.
`mdui-dialog-cancel`	Facendo clic su questo elemento verrà attivato l'evento `cancel.mdui.dialog`.
`mdui-dialog-confirm`	Facendo clic su questo elemento verrà attivato l'evento `confirm.mdui.dialog`.

Chiamata via JavaScript

Istanziazione del componente:

// selector è il selettore CSS del dialog, un elemento DOM o una stringa HTML
// options è l'oggetto di configurazione, vedi l'elenco dei parametri qui sotto
var inst = new mdui.Dialog(selector, options);

Esegui

Parametro

Nome	Tipo	Predefinito	Descrizione
`overlay`	`boolean`	`true`	Indica se visualizzare una maschera (overlay) all'apertura del dialog.
`history`	`boolean`	`true`	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.
`modal`	`boolean`	`false`	Indica se rendere il dialog modale. Se impostato su false, il dialog verrà chiuso facendo clic all'esterno di esso.
`closeOnEsc`	`boolean`	`true`	Indica se chiudere il dialog quando viene premuto il tasto Esc.
`closeOnCancel`	`boolean`	`true`	Indica se chiudere il dialog quando viene premuto il pulsante Annulla.
`closeOnConfirm`	`boolean`	`true`	Indica se chiudere il dialog quando viene premuto il pulsante Conferma.
`destroyOnClosed`	`boolean`	`false`	Indica se distruggere automaticamente il dialog dopo la chiusura.

Metodo

Nome metodo	Descrizione
`open()`	Apre il dialog.
`close()`	Chiude il dialog.
`toggle()`	Alterna lo stato di apertura del dialog.
`getState()`	Ottiene lo stato del dialog. Include quattro stati (`opening`, `opened`, `closing`, `closed`).
`destroy()`	Distrugge il dialog.
`handleUpdate()`	Riposiziona il dialog e ricalcola l'altezza della barra di scorrimento. Da chiamare se il contenuto del dialog viene modificato dopo l'apertura.

Evento

Nome evento	Descrizione	Target	Parametri
`open.mdui.dialog`	L'evento viene attivato quando inizia l'animazione di apertura del dialog.	`<div class="mdui-dialog"></div>`	`event._detail.inst`: istanza
`opened.mdui.dialog`	L'evento viene attivato quando termina l'animazione di apertura del dialog.
`close.mdui.dialog`	L'evento viene attivato quando inizia l'animazione di chiusura del dialog.
`closed.mdui.dialog`	L'evento viene attivato quando termina l'animazione di chiusura del dialog.
`cancel.mdui.dialog`	L'evento viene attivato quando viene premuto il pulsante Annulla.
`confirm.mdui.dialog`	L'evento viene attivato quando viene premuto il pulsante Conferma.

Dialog predefiniti

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.

Tutte queste funzioni restituiscono l'istanza del dialog.

mdui.dialog()

Apre un dialog con titolo, contenuto e pulsanti personalizzabili. Questo metodo è generico; mdui.alert(), mdui.confirm() e mdui.prompt() sono basati su questo metodo.

mdui.dialog(options)

Esempio

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: 'Annulla'
    },
    {
      text: 'Conferma',
      onClick: function(inst){
        mdui.alert('Callback al clic del pulsante Conferma');
      }
    }
  ]
});

Parametro

Nome	Tipo	Predefinito	Descrizione
`title`	`string`		Titolo del dialog.
`content`	`string`		Contenuto del dialog.
`buttons`	`array`		Array di pulsanti, ogni pulsante è un oggetto con i parametri del pulsante (vedi tabella sotto).
`stackedButtons`	`boolean`	`false`	Indica se i pulsanti sono disposti verticalmente.
`cssClass`	`string`		Classe CSS aggiunta a `.mdui-dialog`.
`history`	`boolean`	`true`	Indica se monitorare l'evento `hashchange`. Se true, il dialog può essere chiuso tramite il pulsante "Indietro".
`overlay`	`boolean`	`true`	Indica se visualizzare una maschera all'apertura del dialog.
`modal`	`boolean`	`false`	Indica se rendere il dialog modale. Se impostato su false, il dialog verrà chiuso facendo clic all'esterno.
`closeOnEsc`	`boolean`	`true`	Indica se chiudere il dialog premendo il tasto Esc.
`destroyOnClosed`	`boolean`	`true`	Indica se distruggere automaticamente il dialog dopo la chiusura.
`onOpen`	`function`		Callback all'inizio dell'animazione di apertura. Il parametro è l'istanza del dialog.
`onOpened`	`function`		Callback al termine dell'animazione di apertura. Il parametro è l'istanza del dialog.
`onClose`	`function`		Callback all'inizio dell'animazione di chiusura. Il parametro è l'istanza del dialog.
`onClosed`	`function`		Callback al termine dell'animazione di chiusura. Il parametro è l'istanza del dialog.

Parametri del pulsante:

Nome	Tipo	Predefinito	Descrizione
`text`	`string`		Testo del pulsante.
`bold`	`boolean`	`false`	Indica se il testo del pulsante è in grassetto.
`close`	`boolean`	`true`	Indica se chiudere il dialog dopo aver fatto clic sul pulsante.
`onClick`	`function`		Funzione di callback al clic del pulsante.

mdui.alert()

Apre un alert che può contenere un titolo, contenuto e un pulsante di conferma:

mdui.alert(text, onConfirm, options)

mdui.alert(text, title, onConfirm, options)

Esempio

// Solo testo
mdui.alert('content');

// Con titolo e testo
mdui.alert('content', 'title');

// Con callback
mdui.alert('content', 'title', function() {
  mdui.alert('Pulsante Conferma cliccato');
});

// Con testo e callback
mdui.alert('content', function() {
  mdui.alert('Pulsante Conferma cliccato');
});

text: testo
title: (opzionale) titolo
onConfirm: (opzionale) callback al clic sul pulsante Conferma. Il parametro è l'istanza del dialog.
options: (opzionale) parametri, vedi la tabella sotto.

Nome	Tipo	Predefinito	Descrizione
`confirmText`	`string`	`ok`	Testo del pulsante di conferma.
`history`	`boolean`	`true`	Indica se monitorare l'evento `hashchange`.
`modal`	`boolean`	`false`	Indica se rendere il dialog modale.
`closeOnEsc`	`boolean`	`true`	Indica se chiudere il dialog premendo il tasto Esc.
`closeOnConfirm`	`boolean`	`true`	Indica se chiudere il dialog premendo il pulsante Conferma.

mdui.confirm()

Apre un confirm che può contenere un titolo, contenuto, un pulsante di conferma e un pulsante annulla:

mdui.confirm(text, onConfirm, onCancel, options)

mdui.confirm(text, title, onConfirm, onCancel, options)

Esempio

// Con testo e callback di conferma
mdui.confirm('content', function(){
  mdui.alert('Pulsante Conferma cliccato');
});

// Con testo, callback di conferma e annulla
mdui.confirm('content',
  function(){
    mdui.alert('Pulsante Conferma cliccato');
  },
  function(){
    mdui.alert('Pulsante Annulla cliccato');
  }
);

// Con testo, titolo e callback di conferma
mdui.confirm('content', 'title', function(){
  mdui.alert('Pulsante Conferma cliccato');
});

// Con testo, titolo, callback di conferma e annulla
mdui.confirm('content', 'title',
  function(){
    mdui.alert('Pulsante Conferma cliccato');
  },
  function(){
    mdui.alert('Pulsante Annulla cliccato');
  }
);

text: testo
title: (opzionale) titolo
onConfirm: (opzionale) callback al clic sul pulsante Conferma. Il parametro è l'istanza del dialog.
onCancel: (opzionale) callback al clic sul pulsante Annulla. Il parametro è l'istanza del dialog.
options: (opzionale) parametri, vedi la tabella sotto.

Nome	Tipo	Predefinito	Descrizione
`confirmText`	`string`	`ok`	Testo del pulsante di conferma.
`cancelText`	`string`	`cancel`	Testo del pulsante Annulla.
`history`	`boolean`	`true`	Indica se monitorare l'evento `hashchange`.
`modal`	`boolean`	`false`	Indica se rendere il dialog modale.
`closeOnEsc`	`boolean`	`true`	Indica se chiudere il dialog premendo il tasto Esc.
`closeOnCancel`	`boolean`	`true`	Indica se chiudere il dialog premendo il pulsante Annulla.
`closeOnConfirm`	`boolean`	`true`	Indica se chiudere il dialog premendo il pulsante Conferma.

mdui.prompt()

Apre un dialog che richiede l'input dell'utente, che può contenere un titolo, contenuto, un campo di testo, un pulsante di conferma e un pulsante annulla:

mdui.prompt(label, onConfirm, onCancel, options)

mdui.prompt(label, title, onConfirm, onCancel, options)

Esempio

// Campo di testo a riga singola
mdui.prompt('Questo è un campo di testo a riga singola',
  function (value) {
    mdui.alert('Hai inserito:' + value + ', Pulsante Conferma cliccato');
  },
  function (value) {
    mdui.alert('Hai inserito:' + value + ', Pulsante Annulla cliccato');
  }
);

// Campo di testo su più righe
mdui.prompt('Questo è un campo di testo su più righe',
  function (value) {
    mdui.alert('Hai inserito:' + value + ', Pulsante Conferma cliccato');
  },
  function (value) {
    mdui.alert('Hai inserito:' + value + ', Pulsante Annulla cliccato');
  },
  {
    type: 'textarea'
  }
);

// Con titolo
mdui.prompt('Inserisci il testo', 'title',
  function (value) {
    mdui.alert('Hai inserito:' + value + ', Pulsante Conferma cliccato');
  },
  function (value) {
    mdui.alert('Hai inserito:' + value + ', Pulsante Annulla cliccato');
  }
);

label: testo dell'etichetta fluttuante del campo di testo
title: (opzionale) titolo
onConfirm: (opzionale) callback al clic sul pulsante Conferma. Accetta due parametri: il valore del campo di testo e l'istanza del dialog.
onCancel: (opzionale) callback al clic sul pulsante Annulla. Accetta due parametri: il valore del campo di testo e l'istanza del dialog.
options: (opzionale) parametri, vedi la tabella sotto

Nome	Tipo	Predefinito	Descrizione
`confirmText`	`string`	`ok`	Testo del pulsante di conferma
`cancelText`	`string`	`cancel`	Testo del pulsante Annulla
`history`	`boolean`	`true`	Indica se monitorare l'evento `hashchange`.
`modal`	`boolean`	`false`	Indica se rendere il dialog modale.
`closeOnEsc`	`boolean`	`true`	Indica se chiudere il dialog premendo il tasto Esc.
`closeOnCancel`	`boolean`	`true`	Indica se chiudere il dialog premendo il pulsante Annulla
`closeOnConfirm`	`boolean`	`true`	Indica se chiudere il dialog premendo il pulsante Conferma
`confirmOnEnter`	`boolean`	`false`	Attivazione della funzione di callback `onConfirm` quando viene premuto il tasto Enter.
`type`	`string`	`text`	Tipo di campo di testo. `text`: campo di testo a riga singola `textarea`: campo di testo su più righe
`maxlength`	`int`	`0`	Numero massimo di caratteri in input
`defaultValue`	`string`	`''`	Valore predefinito del campo di testo

Elenco classi CSS

Nome classe	Descrizione
`.mdui-dialog`	Definisce un componente dialog.
`.mdui-dialog-title`	Definisce il titolo del dialog.
`.mdui-dialog-content`	Definisce il contenuto del dialog.
`.mdui-dialog-actions`	Definisce la barra delle azioni del dialog.
`.mdui-dialog-actions-stacked`	Dispone verticalmente i pulsanti nella barra delle azioni del dialog.

Table