GithubHelp home page GithubHelp logo

alipour66m / sweetalert2 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from sweetalert2/sweetalert2

1.0 1.0 0.0 10.26 MB

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

Home Page: https://sweetalert2.github.io/

License: MIT License

JavaScript 82.09% CSS 17.46% HTML 0.45%

sweetalert2's Introduction

SweetAlert2


Build Status: Linux Build Status: Windows Coverage Status Version jsdelivr gzip size Support me on Patreon PayPal Donate

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


See SweetAlert2 in action ↗


👉 Upgrading from v6.x to v7.x? Read the release notes!

👉 Migrating from SweetAlert? SweetAlert 1.x to SweetAlert2 migration guide


Installation

npm install --save sweetalert2

Or:

bower install --save sweetalert2

Or download from CDN: jsdelivr.net/npm/sweetalert2

Usage

<script src="sweetalert2/dist/sweetalert2.all.min.js"></script>

<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>

You can also include the stylesheet separately if desired:

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

Or:

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

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

It's possible to import JS and CSS separately, e.g. if you need to customize styles:

import swal from 'sweetalert2/dist/sweetalert2.js'

import 'sweetalert2/src/sweetalert2.scss'

Please note that TypeScript is well-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((result) => {
  if (result.value) {
    Swal(
      'Deleted!',
      'Your imaginary file has been deleted.',
      'success'
    )
  // For more information about handling dismissals please visit
  // https://sweetalert2.github.io/#handling-dismissals
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    Swal(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})

Browser compatibility

IE11* Edge Chrome Firefox Safari Opera Android Browser* UC Browser*
✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️

* 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.

Related projects

Related community projects

Collaborators

@zenflow @toverux @acupajoe @samturrell @birjolaxew

Contributors

This project exists thanks to all the people who contribute.

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. To begin active development, run npm start or yarn start. This does several things for you:

Donations

Has SweetAlert2 helped you create an amazing application? You can show your support by making a donation in one of several ways:

sweetalert2's People

Stargazers

محمد علی پور فتحکوهی avatar

Watchers

محمد علی پور فتحکوهی avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.