DocumentazioneBandiera italiana

Constructor

Se carichi swalstrap5.js o swalstrap5.min.js:
<script src="https://cdn.jsdelivr.net/npm/@magicbruno/swalstrap5@1.0.8/dist/js/swalstrap5.min.js"></script>
verrà caricata solo la classe Swalstrap. Per poter usare la componente devi caricare il foglio di stile:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@magicbruno/swalstrap5@1.0.8/docs/assets/css/swalstrap.min.css">
e creare al meno un'istanza della classe:
<script>
    const mySwal = new Swalstrap();
</script>
Se invece usi swalstrap5_all.js or swalstrap5_all.min.js: 
<script src="https://cdn.jsdelivr.net/npm/@magicbruno/swalstrap5@1.0.8/dist/js/swalstrap5_all.min.js"></script>
gli stili CSS verranno caricati automaticamente e verrà creata un'istanza predefinita di Swalstrap chiamata Swal (verranno creati anche alcuni alias: swal, Sweelelert e sweelelert).

In entrambi i casi, è possibile creare istanze personalizzate di swalstrap passando un set di opzioni come parametro del costruttore. Queste opzioni saranno le opzioni predefinite applicate a popup e toast create con l'istanza. Vedi qui un esempio.

Opzioni

Property Type Default Description
title
 string '' The title of the popup, as HTML.
titleText
 string '' The title of the popup, as text. Useful to avoid HTML injection.
html
 string '' A HTML content for the popup.
If text and html parameters are provided in the same time, html will be used. 
Swalstrap does NOT sanitize this parameter. It is the developer's responsibility to escape any user input when using the html option, so XSS attacks would be prevented.
text
 string '' A text content for the popup.
If text and html parameters are provided in the same time, html will be used.
icon
 'warning' | 'error' | 'success' | 'info' | 'question' | undefined undefined The icon of the popup. Swalstrap comes with 5 built-in icon which will show a corresponding icon animation: warning, error, success, info, and question.
backdrop
 boolean true Whether or not the popup should show a full screen click-to-dismiss backdrop.
toast
 boolean false Whether or not an alert should be treated as a toast notification. This option is normally coupled with the position parameter and a timer. 
toastStyle
 'primary' | 'secondary' | 'success' | 'info' | 'danger' | 'warning' | 'dark' | 'auto' | '' '' By default toast background color is inherited form Bootstrap. Setting toastStyle, toast background are styled using bootstrap styles. Icon and foreground color will be white. If 'auto', toast style is determined by icon type.
input

'text' | 'email' | 'password' | 'number' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'file' | 'url' | undefined

 undefined Input field type, can be text, email, password, number, textarea, select, radio, checkbox, file and url.
position

'top' | 'top-start' | 'top-end' | 'center' | 'center-start' | 'center-end' | 'bottom' | 'bottom-start' |  'bottom-end'

   Toast position, can be 'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end', popup position can be 'center' or 'top' (other setting will be ignored)
customClass
 object {} A custom CSS class for the popup. These are th default classes: 
                    {
    container: '',
    popup: '',
    header: 'py-0 border-0 px-3 mt-3 mb-1',
    title: 'text-center h2 mt-3 mb-3',
    toastTitle: 'my-0 h5',
    closeButton: 'btn-close',
    icon: '',
    image: 'img-fluid mx-auto mt-4 mb-3',
    htmlContainer: 'text-center lead',
    toastHtml: '',
    input: 'mt-3 mb-1',
    inputLabel: '',
    validationMessage: `justify-content-center d-flex rounded-0 align-items-center 
        border-0 py-2 px-4 mt-3 mb-1 alert alert-danger`,
    actions: 'justify-content-center border-0 py-0 px-4 mt-3 mb-1',
    confirmButton: 'btn btn-primary',
    denyButton: 'btn btn-danger',
    cancelButton: 'btn btn-secondary',
    loader: '',
    footer: 'justify-content-center py-0 pt-2 px-4 mt-3 mb-1',
    timerProgressBar: ''
}
timer
 number 0 Auto close timer of the popup (or of the toast notification). Set in ms (milliseconds).
timerProgressBar
 boolean false If set to true, the timer will have a progress bar at the bottom of the popup. (It doesn't affect toasts)
allowOutsideClick
 boolean true If set to false, the user can't dismiss the popup by clicking on the backdrop.
allowEscapeKey
 boolean true If set to false, the user can't dismiss the popup by pressing the Esc key.
showConfirmButton
 boolean true If set to false, a "Confirm" button will not be shown.
showDenyButton
 boolean false If set to true, a "Deny" button will be shown. It can be useful when you want a popup with 3 buttons.
showCancelButton
 boolean false If set to true, a "Cancel" button will be shown, which the user can click on to dismiss the modal.
confirmButtonText
 string 'Ok' Use this to change the text on the "Confirm" button.
denyButtonText
 string 'No' Use this to change the text on the "Deny" button.
cancelButtonText
 string 'Cancel' Use this to change the text on the "Cancel" button.
showCloseButton
 boolean false Set to true to show close button in top right corner of the popup.
preConfirm
 function | undefined undefined Function to execute before confirming, may be async (Promise-returning) or sync.
Returned (or resolved) value can be:
  • false to prevent a popup from closing
  • anything else to pass that value as the result.value of Swal.fire()
  • undefined to keep the default result.value
See ajax request example.
preDeny
 function | undefined undefined Function to execute before denying, may be async (Promise-returning) or sync.
Returned (or resolved) value can be:
  • false to prevent a popup from closing
  • anything else to pass that value as the result.value of Swal.fire()
  • undefined to keep the default result.value
imageUrl
 string '' Add a customized icon ore image for the popup. Should contain a string with the path or URL to the image.
imageAlt
 string '' An alternative text for the custom image.
inputPlaceholder
 string '' Input field placeholder.
inputValue
 string ''

Input field initial value.

  • If the input type is select, inputValue will represent the selected <option> .
  • If the input type is checkboxinputValue will represent the checked state.
  • If the input type is text, email, number or textarea inputValue represent the initial value of the field.
inputOptions
 object {} If input parameter is set to "select" or "radio", you can provide options. Can be a plain object, with keys that represent option values and values that represent option text.
inputAttributes
 object {} HTML input attributes (e.g. min, max, autocomplete, accept), that are added to the input field. Object keys will represent attributes names, object values will represent attributes values.
validationMessage
 string '' A custom validation message for default validation (email and url input types).
willOpen
 function | undefined undefined Popup lifecycle hook. Synchronously runs before the popup is shown on screen. Provides popup DOM element as the argument.
didOpen
 function | undefined undefined Popup lifecycle hook. Asynchronously runs after the popup has been shown on screen. Provides popup DOM element as the argument.
willClose
 function | undefined undefined Popup lifecycle hook. Synchronously runs when the popup closes by user interaction (and not due to another popup being fired). Provides popup DOM element as the argument.
didClose
 function | undefined undefined Popup lifecycle hook. Asynchronously runs after the popup has been disposed by user interaction (and not due to another popup being fired).
Proprietà Tipo Default Descrizione
title
 string '' Il titolo della popup, come HTML.
titleText
 string '' Il titolo del popup come testo. Utile per evitare l'iniezione di HTML.
html
 string '' Un contenuto HTML per la popup.
Se testo e html sono forniti allo stesso tempo verrà utilizzato html . & Nbsp;
Swalstrap non igienizza questo parametro. È responsabilità dello sviluppatore controllare l'input dell'utente quando si utilizza l'opzione html .
text
 string '' Un contenuto di testo per la popup.
Se testo e html sono forniti allo stesso tempo, verrà utilizzato html .
icon
 'warning' | 'error' | 'success' | 'info' | 'question' | undefined undefined L'icona del popup. Swalstrap viene fornito con 5 icone integrate che che verrà mostrata con un'animazione: warning, error, success, info, and question.
backdrop
 boolean true Indica se Viene mostrato o no un backdrop dietro la popup.
toast
 boolean false Viene visualizzato un toast?. Questa opzione è normalmente accoppiata all'opzione posizione e all'opzione timer.
toastStyle
 'primary' | 'secondary' | 'success' | 'info' | 'danger' | 'warning' | 'dark' | 'auto' | '' '' Per impostazione predefinita il colore di sfondo toast è ereditato da bootstrap. Impostando toaststyle, gli sfondi dei toast sono disegnati usando i colori bootstrap. L'icona e il colore del testo saranno bianchi. Se toaststyle è 'auto', lo stile toast è determinato dal tipo di icona.
input

'text' | 'email' | 'password' | 'number' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'file' | 'url' | undefined

 undefined Tipo del campo di input, può essere text, email, password, number, textarea, select, radio, checkbox, e url.
position

'top' | 'top-start' | 'top-end' | 'center' | 'center-start' | 'center-end' | 'bottom' | 'bottom-start' |  'bottom-end'

   Per i Toast position, può essere 'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end', . Per una popup la posizione può essere 'center' o 'top' (altre impostazioni verranno ignorate)
customClass
 object {} Classi CSS personalizzate per la pop-up. Queste sono le classi predefinite: 
                    {
    container: '',
    popup: '',
    header: 'py-0 border-0 px-3 mt-3 mb-1',
    title: 'text-center h2 mt-3 mb-3',
    toastTitle: 'my-0 h5',
    closeButton: 'btn-close',
    icon: '',
    image: 'img-fluid mx-auto mt-4 mb-3',
    htmlContainer: 'text-center lead',
    toastHtml: '',
    input: 'mt-3 mb-1',
    inputLabel: '',
    validationMessage: `justify-content-center d-flex rounded-0 align-items-center 
        border-0 py-2 px-4 mt-3 mb-1 alert alert-danger`,
    actions: 'justify-content-center border-0 py-0 px-4 mt-3 mb-1',
    confirmButton: 'btn btn-primary',
    denyButton: 'btn btn-danger',
    cancelButton: 'btn btn-secondary',
    loader: '',
    footer: 'justify-content-center py-0 pt-2 px-4 mt-3 mb-1',
    timerProgressBar: ''
}
timer
 number 0 Timeout di chiusura automatica del popup (o della notifica toast). Impostato in millisecondi.
timerProgressBar
 boolean false Se impostato su True, il progresso timer sarà segnalato da una barra di avanzamento nella parte inferiore del popup.(Non influisce sui toast)
allowOutsideClick
 boolean true Se impostato su false , l'utente non può chiudere il popup facendo clic sul backdrop.
allowEscapeKey
 boolean true Se impostato su false , l'utente non può chiudere il popup premendo il tasto Esc.
showConfirmButton
 boolean true Se impostato su false , Il pulsante "conferma" non verrà mostrato.
showDenyButton
 boolean false Se impostato su vero , verrà mostrato il pulsante "rifiuta". Può essere utile quando si desidera un popup con 3 pulsanti.
showCancelButton
 boolean false Se impostato su true , verrà visualizzato il pulsante "annulla".
confirmButtonText
 string 'Ok' Modifica il testo del pulsante "conferma".
denyButtonText
 string 'No' Modifica il testo del pulsante "rifiuta".
cancelButtonText
 string 'Cancel' Modifica il testo del pulsante "annulla".
showCloseButton
 boolean false Impostare su true per mostrare il pulsante di chiusura nell'angolo in alto a destra del popup.
preConfirm
 function | undefined undefined Funzione da eseguire prima di confermare, può essere asincrona (returning a Promise) o sincrona.
Il valore restituito (o risolto nella Promise) può essere:
  • false per impedire che la popup venga chiusa
  • qualsiasi altra cosa per passare quel valore come result.value di swal.fire ()
  • Undefined per mantenere il valore predefinito
Vedi questo esempio di richiesta ajax.
preDeny
 function | undefined undefined Funzione da eseguire prima di rifiutare, può essere asincrone (Promise) o sincrona.
Il valore restituito (o risolto) può essere:
  • false per impedire che la popup venga chiusa
  • qualsiasi altra cosa per passare quel valore come result.value di swal.fire ()
  • Undefined per mantenere il valore predefinito
imageUrl
 string '' Aggiungi un'icona o un'immagine personalizzata alla popup. Deve contenere l'URL dell'immagine.
imageAlt
 string '' Un testo alternativo per l'immagine personalizzata.
inputPlaceholder
 string '' Placeholder del campo di input.
inputValue
 string ''

Valore iniziale del campo di input.

  • Se il tipo di input è select, inputValue rappresenterà la <opzion> & nbsp; selezionata.
  • Se il tipo di input è checkbox InputValue rappresenterà lo stato selezionato (true/false).
  • Se il tipo di input è text, email, numero o textarea inputValue rappresenta il valore iniziale del campo.
inputOptions
 object {} Se input è impostato su "select" o "radio", puoi fornire l'elenco delle opzioni disponibili. È un oggetto semplice, in cui le proprietà rappresentano il testo delle opzioni e i valori i valori dell'opzione.
inputAttributes
 object {} Attributi HTML del campo di input HTML (ad es. min, max, autocomplete, accept), che vengono aggiunti al campo di input. L e chiavi dell'oggetto rappresenteranno i nomi degli attributi, i valori delle proprietà rappresenteranno i valori degli attributi.
validationMessage
 string '' Un messaggio di convalida personalizzato per la convalida predefinita (tipi di input e -mail e URL).
willOpen
 function | undefined undefined Funziona sincrona che viene lanciata prima che il popup venga mostrato sullo schermo. Fornisce l'elemento DOM popup come argomento.
didOpen
 function | undefined undefined Funziona sincrona che viene lanciata dopo che la popup è mostrata sullo schermo. Fornisce l'elemento DOM popup come argomento.
willClose
 function | undefined undefined Funziona sincrona che viene lanciata prima che la popup sia chiusa. Fornisce l'elemento DOM popup come argomento.
didClose
 function | undefined undefined Funziona sincrona che viene lanciata dopo che la popup è stata chiusa. Fornisce l'elemento DOM popup come argomento.

Metodi

Method Returns Description
Swal.isVisible()
 boolean Determine if popup is shown.
Swal.close()
 void Close the currently open SweetAlert2 popup programmatically, the Promise returned by Swal.fire() will be resolved with an empty object { }
Swal.getContainer()
 HTMLElement Get the popup container which contains the backdrop and the popup itself.
Swal.getTitle()
 HTMLElement Get the popup title.
Swal.getCloseButton()
 HTMLElement Get the close button.
Swal.getIcon()
 HTMLElement Get the icon.
Swal.getHtmlContainer()
 HTMLElement Gets the DOM element where the html/text parameter is rendered to.
Swal.getImage()
 HTMLElement Get the image.
Swal.getFooter()
 HTMLElement Get the popup footer.
Swal.getConfirmButton()
 HTMLElement Get the "Confirm" button.
Swal.getDenyButton()
 HTMLElement Get the "Deny" button.
Swal.getCancelButton()
 HTMLElement Get the "Cancel" button.
Swal.showLoading()
 void Shows loader (spinner), this is useful with AJAX requests.

By default the loader be shown instead of the "Confirm" button, but if you want another button to be replaced with a loader, just pass it like this: Swal.showLoading(Swal.getDenyButton())
Swal.hideLoading()
 void Hides loader and shows back the button which was hidden by .showLoading()
Swal.isLoading()
 boolean Determine if popup is in the loading state. Related methods: Swal.showLoading() and Swal.hideLoading()
Swal.getTimerLeft()
 number Returns the time left in case when timer parameter is set. See basic timer example.
Swal.stopTimer()
 number Stops the timer in case when timer parameter is set. Returns the time left. See timer method example.
Swal.resumeTimer()
 number Resume the timer previously stopped. Returns the time left. See timer method example.
Swal.toggleTimer()
 number Toggle state of the timer between stopped and running. Returns the time left. See timer method example.
Swal.isTimerRunning()
 boolean Returns the status of the timer: true if is running, false if it's paused.
Swal.increaseTimer(number n)
 number Increase the timer by n milliseconds. Returns the time left. See timer method example.
Swal.getInput()
 HTMLElement Get the input DOM node, this method works with input parameter.
Swal.getInputValue()
 boolean | string Get the value of the input. If input is text, email, password, number, textarea, url or select returns the value of the element, if input is checkbox returns the checkbox state (true | false), if input is radio return the value of checked option or null if none is checked.
Swal.showValidationMessage(string message)
 void Show an error message inside the validation message DOM node. Passing an empty string as parameter will hide the node.
Swal.getValidationMessage()
 HTMLElement Get the validation message DOM node.
Metodi Valori restituiti Descrizione
Swal.isVisible()
 boolean Determina se la popup è visibile.
Swal.close()
 void Chiude la Popup attualmente aperta, la Promise restituita da swal.fire () sarà risolta con un oggetto vuoto {}
Swal.getContainer()
 HTMLElement Restituisce il contenitore che contiene lo sfondo e la popup stessa.
Swal.getTitle()
 HTMLElement Restituisce il titolo della popup.
Swal.getCloseButton()
 HTMLElement Restituisce il pulsante Chiudi.
Swal.getIcon()
 HTMLElement Restituisce l'icon.
Swal.getHtmlContainer()
 HTMLElement Restituisce l'elemento DOM in cui viene reso il parametro html/text .
Swal.getImage()
 HTMLElement Restituisce l'immagine.
Swal.getFooter()
 HTMLElement Restituisce il footer della popup
Swal.getConfirmButton()
 HTMLElement Restituisce il pulsante il "conferma".
Swal.getDenyButton()
 HTMLElement Restituisce il pulsante il "rifiuta".
Swal.getCancelButton()
 HTMLElement Restituisce il pulsante il "annulla".
Swal.showLoading()
 void Mostra il loader (spinner). Utile nei momenti di attesa come per le richieste Ajax.

Il loader è mostrato invece dei pulsanti nel mezzo dell'area pulsanti.
Swal.hideLoading()
 void Nasconde il loader e mostra i pulsanti nascosti da .Showloading()
Swal.isLoading()
 boolean Determina se il popup è nello stato di caricamento. Metodi correlati: Swal.showLoading() and Swal.hideLoading()
Swal.getTimerLeft()
 number Restituisce il tempo rimanente nel caso in cui sia impostato il parametro timer. Vedi Esempio.
Swal.stopTimer()
 number Interrompe il timer nel caso in cui è impostato il parametro timer. Restituisce il tempo rimasto. vedi esempio.
Swal.resumeTimer()
 number Riprende il timer precedentemente fermato. Restituisce il tempo rimasto. vedi esempio.
Swal.toggleTimer()
 number Attiva/disattiva il timer. Restituisce il tempo rimasto. Vedi esmpio.
Swal.isTimerRunning()
 boolean Restituisce lo stato del timer: vero se è in esecuzione, false se si è in pausa.
Swal.increaseTimer(number n)
 number Aumenta il timer di n millisecondi. Restituisce il tempo rimasto. Vedi esempio.
Swal.getInput()
 HTMLElement Restituisce il nodo DOM di input, questo metodo funziona con il parametro di input.
Swal.getInputValue()
 boolean | string Restituisce il valore dell'input. Se l'input è testo, e-mail, password, numero, textarea, URL o select restituisce il value dell'elemento, se l'input è una checkbox restituisce lo stato della checkbox (true|false), se l'input è un gruppo di radio buttons restituisce il value dell'opzione selezionata o NULL Se nessuno opzione è selezionata.
Swal.showValidationMessage(string message)
 void Mostra un messaggio di errore all'interno del nodo DOM del messaggio di convalida. Passando una stringa vuota come parametro nasconderà & nbsp; il nodo.
Swal.getValidationMessage()
 HTMLElement Restituisce il nodo DOM del messaggio di convalida.