Dialog

I dialoghi vengono utilizzati per visualizzare informazioni cruciali durante il flusso di lavoro di un utente.

Oltre a utilizzare direttamente questo componente, mdui fornisce anche quattro funzioni: mdui.dialog, mdui.alert, mdui.confirm, mdui.prompt. Queste funzioni offrono un modo più pratico per usare il componente Dialog.

Utilizzo

Importa il componente:

import 'mdui/components/dialog.js';

Importa il tipo TypeScript:

import type { Dialog } from 'mdui/components/dialog.js';

Esempio:

Dialogo Chiudi

Apri il dialogo

<mdui-dialog class="example-dialog">
  Dialogo
  <mdui-button>Chiudi</mdui-button>
</mdui-dialog>

<mdui-button>Apri il dialogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-dialog");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Esempi

Chiudi al clic sullo sfondo

Aggiungi l'attributo close-on-overlay-click per chiudere il dialogo quando si fa clic sullo sfondo.

Dialogo

Apri il dialogo

<mdui-dialog close-on-overlay-click class="example-overlay">Dialogo</mdui-dialog>

<mdui-button>Apri il dialogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-overlay");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Sorgente

Chiudi con ESC

Aggiungi l'attributo close-on-esc per abilitare la chiusura del dialogo quando viene premuto il tasto ESC.

Dialogo

Apri il dialogo

<mdui-dialog
  close-on-esc
  close-on-overlay-click
  class="example-esc"
>Dialogo</mdui-dialog>

<mdui-button>Apri il dialogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-esc");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Sorgente

Schermo Intero

Aggiungi l'attributo fullscreen per rendere il dialogo a schermo intero.

Dialogo Chiudi

Apri il dialogo

<mdui-dialog fullscreen class="example-fullscreen">
  Dialogo
  <mdui-button>Chiudi</mdui-button>
</mdui-dialog>

<mdui-button>Apri il dialogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-fullscreen");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Sorgente

Icona

Imposta l'attributo icon per aggiungere un'Icona Material sopra il dialogo.

Dialogo

Apri il dialogo

<mdui-dialog
  icon="restart_alt"
  close-on-overlay-click
  class="example-icon"
>Dialogo</mdui-dialog>

<mdui-button>Apri il dialogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Sorgente

Oppure, aggiungi un elemento icona sopra il dialogo utilizzando lo slot icon.

Dialogo

Apri il dialogo

<mdui-dialog close-on-overlay-click class="example-icon-slot">
  Dialogo
  <mdui-icon slot="icon" name="restart_alt"></mdui-icon>
</mdui-dialog>

<mdui-button>Apri il dialogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Sorgente

Titolo e Descrizione

Usa gli attributi headline e description per impostare il titolo e la descrizione del dialogo.

Apri il dialogo

<mdui-dialog
  headline="Eliminare le immagini selezionate?"
  description="Le immagini verranno rimosse permanentemente dal tuo account e da tutti i dispositivi sincronizzati."
  close-on-overlay-click
  class="example-headline"
></mdui-dialog>

<mdui-button>Apri il dialogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Sorgente

Oppure, usa gli slot headline e description per impostare gli elementi del titolo e della descrizione.

Eliminare le immagini selezionate? Le immagini verranno rimosse permanentemente dal tuo account e da tutti i dispositivi sincronizzati.

Apri il dialogo

<mdui-dialog close-on-overlay-click class="example-headline-slot">
  <span slot="headline">Eliminare le immagini selezionate?</span>
  <span slot="description">Le immagini verranno rimosse permanentemente dal tuo account e da tutti i dispositivi sincronizzati.</span>
</mdui-dialog>

<mdui-button>Apri il dialogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Sorgente

Pulsanti di Azione in Basso

Usa lo slot action per aggiungere pulsanti di azione nella parte inferiore del dialogo.

Annulla

Elimina

Apri il dialogo

<mdui-dialog
  close-on-overlay-click
  headline="Eliminare le immagini selezionate?"
  class="example-action"
>
  <mdui-button slot="action" variant="text">Annulla</mdui-button>
  <mdui-button slot="action" variant="tonal">Elimina</mdui-button>
</mdui-dialog>

<mdui-button>Apri il dialogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-action");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Sorgente

Aggiungi l'attributo stacked-actions per impilare verticalmente i pulsanti di azione.

Attiva la localizzazione

No grazie

Apri il dialogo

<mdui-dialog
  stacked-actions
  close-on-overlay-click
  headline="Usare il servizio di localizzazione?"
  class="example-stacked-actions"
>
  <mdui-button slot="action" variant="text">Attiva la localizzazione</mdui-button>
  <mdui-button slot="action" variant="text">No grazie</mdui-button>
</mdui-dialog>

<mdui-button>Apri il dialogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-stacked-actions");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Sorgente

Intestazione

Usa lo slot header per definire l'intestazione del dialogo.

Titolo

Salva

Apri il dialogo

<mdui-dialog close-on-overlay-click class="example-header">
  <mdui-top-app-bar slot="header">
    <mdui-button-icon icon="close"></mdui-button-icon>
    <mdui-top-app-bar-title>Titolo</mdui-top-app-bar-title>
    <mdui-button variant="text">Salva</mdui-button>
  </mdui-top-app-bar>
  <div style="height: 100px"></div>
</mdui-dialog>

<mdui-button>Apri il dialogo</mdui-button>

<script>
  const dialog = document.querySelector(".example-header");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`icon`	`icon`	`string`	-
Nome dell'icona Material in alto. Può essere specificato anche tramite `slot="icon"`.
`headline`	`headline`	`string`	-
Titolo. Può essere specificato anche tramite `slot="headline"`.
`description`	`description`	`string`	-
Testo sotto il titolo. Può essere specificato anche tramite `slot="description"`.
`open`	`open`	`boolean`	`false`
Se la finestra di dialogo è aperta
`fullscreen`	`fullscreen`	`boolean`	`false`
Indica se mostrare la finestra di dialogo a schermo intero
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Indica se consentire la chiusura della finestra di dialogo premendo il tasto ESC
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Indica se consentire la chiusura della finestra di dialogo facendo clic sull'overlay
`stacked-actions`	`stackedActions`	`boolean`	`false`
Se disporre verticalmente i pulsanti di azione in basso

Eventi

Nome
`open`
Attivato all'inizio dell'apertura della finestra di dialogo. È possibile impedire l'apertura della finestra di dialogo chiamando `event.preventDefault()`.
`opened`
Attivato al termine dell'animazione di apertura della finestra di dialogo.
`close`
Attivato all'inizio della chiusura della finestra di dialogo. È possibile impedire la chiusura della finestra di dialogo chiamando `event.preventDefault()`.
`closed`
Attivato al termine dell'animazione di chiusura della finestra di dialogo.
`overlay-click`
Attivato quando si fa clic sull'overlay.

Slots

Nome
`header`
Elemento in alto, contiene di default lo slot `icon` e lo slot `headline`.
`icon`
Icona in alto
`headline`
Titolo in alto
`description`
Testo sotto il titolo
(predefinito)
Contenuto principale della finestra di dialogo
`action`
Elementi nella barra delle azioni in basso

CSS Parts

Nome
`overlay`
Overlay
`panel`
Contenitore della finestra di dialogo
`header`
Parte dell'intestazione della finestra di dialogo, contiene icona e titolo
`icon`
Icona in alto, situata nell'intestazione
`headline`
Titolo in alto, situato nell'intestazione
`body`
Parte del corpo della finestra di dialogo
`description`
Parte del testo secondario, situata nel corpo
`action`
Pulsanti di azione in basso

CSS Custom Property

Nome
`--shape-corner`
Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
`--z-index`
Valore CSS `z-index` del componente

Capitolo precedente

Collapse

Capitolo successivo

Divider