prompt

La funzione prompt è un wrapper per il componente <mdui-dialog> e sostituisce la funzione nativa window.prompt. Con questa funzione, puoi aprire un dialogo di input testuale senza scrivere alcun HTML per il componente.

Utilizzo

Importa la funzione:

import { prompt } from 'mdui/functions/prompt.js';

Esempio:

apri

<mdui-button class="example-button">apri</mdui-button>

<script type="module">
  import { prompt } from "mdui/functions/prompt.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    prompt({
      headline: "Titolo Prompt",
      description: "Descrizione prompt",
      confirmText: "OK",
      cancelText: "Annulla",
      onConfirm: (value) => console.log("confermato: " + value),
      onCancel: () => console.log("annullato"),
    });
  });
</script>

API

prompt(options: Options): Promise<string>

La funzione accetta un oggetto Options come parametro e restituisce una Promise. Se il dialogo viene chiuso facendo clic sul pulsante di conferma, la Promise restituisce il valore inserito nel campo di testo. Se il dialogo viene chiuso in qualsiasi altro modo, la Promise viene respinta.

Options

Proprietà	Tipo	Predefinito
`headline`	`string`	-
Il titolo del dialogo.
`description`	`string`	-
La descrizione del dialogo.
`icon`	`string`	-
Il nome dell'Icona Material visualizzata nella parte superiore del dialogo.
`closeOnEsc`	`boolean`	`false`
Indica se il dialogo può essere chiuso premendo il tasto Esc.
`closeOnOverlayClick`	`boolean`	`false`
Indica se il dialogo può essere chiuso cliccando sullo sfondo.
`confirmText`	`string`	`OK`
Il testo per il pulsante di conferma.
`cancelText`	`string`	`Annulla`
Il testo per il pulsante di annullamento.
`stackedActions`	`boolean`	`false`
Indica se impilare verticalmente i pulsanti di azione inferiori.
`queue`	`string`	-
Il nome della coda. Per impostazione predefinita, la coda è disabilitata. Se questa funzione viene invocata più volte, verranno visualizzati più dialoghi contemporaneamente. Se viene fornito un nome di coda, i dialoghi con lo stesso nome di coda si apriranno in sequenza, ciascuno dopo la chiusura del precedente. Le funzioni `dialog()`, `alert()`, `confirm()`, `prompt()` condividono la stessa coda se i loro nomi di coda corrispondono.
`onConfirm`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
La callback si attiva quando fai clic sul pulsante di conferma. La funzione riceve il valore del campo di testo e l'istanza del dialogo come parametri e `this` fa riferimento alla stessa istanza del dialogo. Per impostazione predefinita, un clic sul pulsante di conferma chiude il dialogo. Se il valore restituito è `false`, il dialogo rimane aperto. Se il valore restituito è una promise, il dialogo si chiude dopo che la promise viene risolta.
`onCancel`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
La callback si attiva quando fai clic sul pulsante di annullamento. La funzione riceve il valore del campo di testo e l'istanza del dialogo come parametri e `this` fa riferimento alla stessa istanza del dialogo. Per impostazione predefinita, un clic sul pulsante di annullamento chiude il dialogo. Se il valore restituito è `false`, il dialogo rimane aperto. Se il valore restituito è una promise, il dialogo si chiude dopo che la promise viene risolta.
`onOpen`	`(dialog: Dialog) => void`	-
La callback si attiva quando il dialogo inizia ad aprirsi. La funzione riceve l'istanza del dialogo come parametro e `this` fa riferimento alla stessa istanza del dialogo.
`onOpened`	`(dialog: Dialog) => void`	-
La callback si attiva quando l'animazione di apertura del dialogo è completata. La funzione riceve l'istanza del dialogo come parametro e `this` fa riferimento alla stessa istanza del dialogo.
`onClose`	`(dialog: Dialog) => void`	-
La callback si attiva quando il dialogo inizia a chiudersi. La funzione riceve l'istanza del dialogo come parametro e `this` fa riferimento alla stessa istanza del dialogo.
`onClosed`	`(dialog: Dialog) => void`	-
La callback si attiva quando l'animazione di chiusura del dialogo è completata. La funzione riceve l'istanza del dialogo come parametro e `this` fa riferimento alla stessa istanza del dialogo.
`onOverlayClick`	`(dialog: Dialog) => void`	-
La callback si attiva quando fai clic sullo sfondo. La funzione riceve l'istanza del dialogo come parametro e `this` fa riferimento alla stessa istanza del dialogo.
`validator`	`(value: string) => boolean \| string \| Promise<void>`	-
Una funzione di validazione per il campo di testo che riceve il valore del campo come parametro. `this` si riferisce all'istanza TextField. La validazione viene eseguita dopo che l'API di validazione nativa del browser è stata superata con successo. Se restituisce un valore `boolean`, `false` indica un fallimento di validazione, `true` indica un successo di validazione. Se restituisce una stringa, una stringa non vuota indica un fallimento di validazione, con la stringa restituita che funge da messaggio di errore. Se restituisce una Promise, una risoluzione indica il successo della validazione, mentre un rifiuto indica un fallimento della validazione. Il motivo del rifiuto viene utilizzato come messaggio di errore.
`textFieldOptions`	`Partial<TextField>`	-
Il campo di testo interno è un componente `<mdui-text-field>`. È possibile configurare il componente `<mdui-text-field>` utilizzando questo parametro.

Capitolo precedente

confirm

Capitolo successivo

snackbar