SweetAlert2

Ecco un confronto con un messaggio di errore standard Il primo uso il messaggio di allerta standard di sistema. Il secondo invece utilizza la funzione SweetAlert2.

alert('Oops! Something went wrong!')

swal(
  'Oops...',
  'Something went wrong!',
  'error'
)

Carino vero? SweetAlert2 si centra automaticamente sulla pagina, ha un bell'aspetto indipendentemente dal fatto che si utilizzi PC, Tablet o Cellulare. Altamente personalizzabile come puoi vedere qui sotto.

ALTRI ESEMPI

• Un messaggio base

  Provami!

  swal('Any fool can use a computer')

• Un titolo con testo descrittivo

  Provami!

  swal(
    'The Internet?',
    'That thing is still around?',
    'question'
  )

• A messaggio di successo!

  Provami!

  swal(
    'Good job!',
    'You clicked the button!',
    'success'
  )

• Messaggio cin timer di chiusura automatica

  Provami!

  swal({
    title: 'Auto close alert!',
    text: 'I will close in 2 seconds.',
    timer: 2000
  }).then(
    function () {},
    // handling the promise rejection
    function (dismiss) {
      if (dismiss === 'timer') {
        console.log('I was closed by the timer')
      }
    }
  )

• Pulsanti e descrizione HTML personalizzati

  Provami!

  swal({
    title: '<i>HTML</i> <u>example</u>',
    type: 'info',
    html:
      'You can use <b>bold text</b>, ' +
      '<a href="//github.com">links</a> ' +
      'and other HTML tags',
    showCloseButton: true,
    showCancelButton: true,
    confirmButtonText:
      '<i class="fa fa-thumbs-up"></i> Great!',
    cancelButtonText:
      '<i class="fa fa-thumbs-down"></i>'
  })

• jQuery HTML con animazione personalizzata (Animate.css )

  Provami!

  swal({
    title: 'jQuery HTML example',
    html: $('<div>')
      .addClass('some-class')
      .text('jQuery is everywhere.'),
    animation: false,
    customClass: 'animated tada'
  })

• Messaggio di avviso con pulsante conferma...

  Provami!

  swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!'
  }).then(function () {
    swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  })

•  e passando un parametro, puoi eseguire qualcos' altro con "Annulla"

  Provami!

  swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!',
    cancelButtonText: 'No, cancel!',
    confirmButtonClass: 'btn btn-success',
    cancelButtonClass: 'btn btn-danger',
    buttonsStyling: false
  }).then(function () {
    swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }, function (dismiss) {
    // dismiss can be 'cancel', 'overlay',
    // 'close', and 'timer'
    if (dismiss === 'cancel') {
      swal(
        'Cancelled',
        'Your imaginary file is safe :)',
        'error'
      )
    }
  })

• Un messaggio con immagine personalizzata e un' animazione css disabilitata.

  Provami!

  swal({
    title: 'Sweet!',
    text: 'Modal with a custom image.',
    imageUrl: 'https://unsplash.it/400/200',
    imageWidth: 400,
    imageHeight: 200,
    animation: false
  })

• Un messaggio con larghezza, riempimento e sfondo personalizzati.

  Provami!

  swal({
    title: 'Custom width, padding, background.',
    width: 600,
    padding: 100,
    background: '#fff url(//bit.ly/1Nqn9HU)'
  })

• Esempio di richiesta Ajax

  Provami!

  swal({
    title: 'Submit email to run ajax request',
    input: 'email',
    showCancelButton: true,
    confirmButtonText: 'Submit',
    showLoaderOnConfirm: true,
    preConfirm: function (email) {
      return new Promise(function (resolve, reject) {
        setTimeout(function() {
          if (email === 'taken@example.com') {
            reject('This email is already taken.')
          } else {
            resolve()
          }
        }, 2000)
      })
    },
    allowOutsideClick: false
  }).then(function (email) {
    swal({
      type: 'success',
      title: 'Ajax request finished!',
      html: 'Submitted email: ' + email
    })
  })

• Esempio di modellazione concatenata (coda)

  Provami!

  swal.setDefaults({
    input: 'text',
    confirmButtonText: 'Next →',
    showCancelButton: true,
    animation: false,
    progressSteps: ['1', '2', '3']
  })
  
  var steps = [
    {
      title: 'Question 1',
      text: 'Chaining swal2 modals is easy'
    },
    'Question 2',
    'Question 3'
  ]
  
  swal.queue(steps).then(function (result) {
    swal.resetDefaults()
    swal({
      title: 'All done!',
      html:
        'Your answers: <pre>' +
          JSON.stringify(result) +
        '</pre>',
      confirmButtonText: 'Lovely!',
      showCancelButton: false
    })
  }, function () {
    swal.resetDefaults()
  })

• Esempio di coda dinamica

  Provami!

  swal.queue([{
    title: 'Your public IP',
    confirmButtonText: 'Show my public IP',
    text:
      'Your public IP will be received ' +
      'via AJAX request',
    showLoaderOnConfirm: true,
    preConfirm: function () {
      return new Promise(function (resolve) {
        $.get('https://api.ipify.org?format=json')
          .done(function (data) {
            swal.insertQueueStep(data.ip)
            resolve()
          })
      })
    }
  }])

$ bower install sweetalert2

$ npm install sweetalert2

<script src="bower_components/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="bower_components/sweetalert2/dist/sweetalert2.min.css">

<!-- Include a polyfill for ES6 Promises (optional) for IE11 and Android browser -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>

// ES6 Modules
import { default as swal } from 'sweetalert2'

// CommonJS
const swal = require('sweetalert2')

swal({
  title: 'Error!',
  text: 'Do you want to continue',
  type: 'error',
  confirmButtonText: 'Cool'
})

swal(...)
  .catch(swal.noop)

TIPI MODALI

TIPI INPUT

swal({
  title: 'Input something',
  input: 'text',
  showCancelButton: true,
  inputValidator: function (value) {
    return new Promise(function (resolve, reject) {
      if (value) {
        resolve()
      } else {
        reject('You need to write something!')
      }
    })
  }
}).then(function (result) {
  swal({
    type: 'success',
    html: 'You entered: ' + result
  })
})

swal({
  title: 'Input email address',
  input: 'email'
}).then(function (email) {
  swal({
    type: 'success',
    html: 'Entered email: ' + email
  })
})

swal({
  title: 'Enter your password',
  input: 'password',
  inputAttributes: {
    'maxlength': 10,
    'autocapitalize': 'off',
    'autocorrect': 'off'
  }
}).then(function (password) {
  if (password) {
    swal({
      type: 'success',
      html: 'Entered password: ' + password
    })
  }
})

swal({
  input: 'textarea',
  showCancelButton: true
}).then(function (text) {
  if (text) {
    swal(text)
  }
})

swal({
  title: 'Select Ukraine',
  input: 'select',
  inputOptions: {
    'SRB': 'Serbia',
    'UKR': 'Ukraine',
    'HRV': 'Croatia'
  },
  inputPlaceholder: 'Select country',
  showCancelButton: true,
  inputValidator: function (value) {
    return new Promise(function (resolve, reject) {
      if (value === 'UKR') {
        resolve()
      } else {
        reject('You need to select Ukraine :)')
      }
    })
  }
}).then(function (result) {
  swal({
    type: 'success',
    html: 'You selected: ' + result
  })
})

// inputOptions can be an object or Promise
var inputOptions = new Promise(function (resolve) {
  setTimeout(function () {
    resolve({
      '#ff0000': 'Red',
      '#00ff00': 'Green',
      '#0000ff': 'Blue'
    })
  }, 2000)
})

swal({
  title: 'Select color',
  input: 'radio',
  inputOptions: inputOptions,
  inputValidator: function (result) {
    return new Promise(function (resolve, reject) {
      if (result) {
        resolve()
      } else {
        reject('You need to select something!')
      }
    })
  }
}).then(function (result) {
  swal({
    type: 'success',
    html: 'You selected: ' + result
  })
})

swal({
  title: 'Terms and conditions',
  input: 'checkbox',
  inputValue: 1,
  inputPlaceholder:
    'I agree with the terms and conditions',
  confirmButtonText:
    'Continue <i class="fa fa-arrow-right></i>',
  inputValidator: function (result) {
    return new Promise(function (resolve, reject) {
      if (result) {
        resolve()
      } else {
        reject('You need to agree with T&C')
      }
    })
  }
}).then(function (result) {
  swal({
    type: 'success',
    text: 'You agreed with T&C :)'
  })
})

swal({
  title: 'Select image',
  input: 'file',
  inputAttributes: {
    accept: 'image/*'
  }
}).then(function (file) {
  var reader = new FileReader
  reader.onload = function (e) {
    swal({
      imageUrl: e.target.result
    })
  }
  reader.readAsDataURL(file)
})

swal({
  title: 'How old are you?',
  type: 'question',
  input: 'range',
  inputAttributes: {
    min: 8,
    max: 120,
    step: 1
  },
  inputValue: 25
})

swal({
  title: 'Multiple inputs',
  html:
    '<input id="swal-input1" class="swal2-input">' +
    '<input id="swal-input2" class="swal2-input">',
  preConfirm: function () {
    return new Promise(function (resolve) {
      resolve([
        $('#swal-input1').val(),
        $('#swal-input2').val()
      ])
    })
  },
  onOpen: function () {
    $('#swal-input1').focus()
  }
}).then(function (result) {
  swal(JSON.stringify(result))
}).catch(swal.noop)