zhoudaqing / sweetalert2 Goto Github PK

SweetAlert2

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.

What's the difference between SweetAlert and SweetAlert2?

• Reason of creating this fork is inactivity of original SweetAlert plugin
• SweetAlert to SweetAlert2 migration guide

See SweetAlert2 in action!

Installation

npm install --save sweetalert2

Or:

bower install --save sweetalert2

Or download from CDN: cdnjs.com/limonte-sweetalert2

Usage

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

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

Or:

// ES6 Modules or TypeScript
import swal from 'sweetalert2'

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

Please note that TypeScript is supported, so you don't have to install a third-party declaration file.

Examples

The most basic message:

swal('Hello world!')

A message signaling an error:

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

Handling the result of SweetAlert2 modal:

swal({
  title: 'Are you sure?',
  text: 'You will not be able to recover this imaginary file!',
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, keep it'
}).then(function() {
  swal(
    'Deleted!',
    'Your imaginary file has been deleted.',
    'success'
  )
}, function(dismiss) {
  // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
  if (dismiss === 'cancel') {
    swal(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})

View more examples

Handling Dismissals

When an alert is dismissed by the user, the Promise returned by swal() will reject with a string documenting the reason it was dismissed:

If rejections are not handled, it will be logged as an error. To avoid this, add a rejection handler to the Promise. Alternatively, you can use .catch(swal.noop) as a quick way to simply suppress the errors:

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

Modal Types

success	error	warning	info	question

Configuration

You can redefine default params by using swal.setDefaults(customParams) where customParams is an object.

Methods

Browser compatibility

* ES6 Promise polyfill should be included, see usage example.

Note that SweetAlert2 does not and will not provide support or functionality of any kind on IE10 and lower.

Contributing

If you would like to contribute enhancements or fixes, please do the following:

1. Fork the sweetalert2 repository and clone it locally.

2. Make sure you have npm or yarn installed.

3. When in the SweetAlert2 directory, run npm install or yarn install to install dependencies.

4. Start gulp watcher gulp watch to automatically build and minify the SCSS and JS-files.

5. Check that your code is compliant with code linters: gulp lint.

6. Ensure that you didn't break any of tests: npm test.

7. Make sure that dist/* files aren't committed and create a pull request.

Related projects

• toverux/ngsweetalert2 - SweetAlert2 directive for Angular 2+
• lishengzxc/vue-sweetalert - SweetAlert2 plugin for Vue.js
• limonte/sweetalert2-webpack-demo - SweetAlert2 + webpack demo

Donations

If you liked this plugin, you can donate to support it:

• https://www.paypal.me/limonte/5eur