âĻ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. ðšðĶ
MIT License
Bot releases are hidden (Show)
extraParams
to default validators, use extraParams.validationMessage
for l10n of default validators (#1084)Swal({
input: 'email',
extraParams: {
validationMessage: 'Adresse e-mail invalide'
}
})
Swal.getPopup()
getter methodswal.mixin(params)
ð thanks to @zenflowReturns a wrapped instance of swal
containing params
as defaults.
Useful for reusing swal configuration.
Before:
const textPromptOptions = { input: 'text', showCancelButton: true }
const {value: firstName} = await swal({ ...textPromptOptions, title: 'What is your first name?' })
const {value: lastName} = await swal({ ...textPromptOptions, title: 'What is your last name?' })
After:
const myTextPrompt = swal.mixin({ input: 'text', showCancelButton: true })
const {value: firstName} = await myTextPrompt('What is your first name?')
const {value: lastName} = await myTextPrompt('What is your last name?')
inputValue
now could be a Promise (#1025) thanks to @gvernionAfterClose
parameter (#1030) thanks to @Baune8Dsrc/staticMethods/
(#1026) thanks to @zenflowPublished by limonte over 6 years ago
swal.setDefaults({
animate: () => !swal.isVisible()
})
Implementation credits: @acupajoe
Published by limonte over 6 years ago
Thanks to @dchekanov who raised the issue https://github.com/sweetalert2/sweetalert2/issues/896, now it's possible to prevent a dialog from being closed by returning false
in the preConfirm
parameter function.
Example:
preConfirm: function() {
if (!confirm('Are you sure?')) {
return false;
}
// proceed otherwise
}
or even shorter with ES6:
preConfirm: () => confirm('Are you sure?')
jsfiddle: https://jsfiddle.net/ad3quksn/386/
Published by limonte over 6 years ago
Thanks to @toverux and his idea, now we have improved the way of handling dismissals:
if (dismiss == 'overlay') {
//
}
if (dismiss == swal.DismissReason.backdrop) {
//
}
'overlay'
is DEPRECATED and replaced by DismissReason.backdrop
, it will stop work in the next major release.
Custom backdrop (#873)
Now it's possible to pass a string to the backdrop
parameter which will be assigned to the CSS background
property of a backdrop element.
Nyan Cat as a backdrop: https://jsfiddle.net/ad3quksn/370/ ð
Implementation credits: @acupajoe ð
Automated release process (#857) ð ð ð
Now the releasing is as easy as npm run release
Implementation credits: @zenflow ð
inputOptions
parameter (#853), live example: https://jsfiddle.net/ad3quksn/347/
gulp watch
(#844)sandbox.html
(#854)test/qunit/*.js
ðŧ Thanks to @zenflow, @toverux, @acupajoe for participating in discussions about new features implementation!
font-family
to inherit
for making popups more coherent with the rest of the apps.!default
package.scripts
(#841)gulp watch
task to run the build upon initialization (#845)Published by limonte almost 7 years ago
@acurrieclark's suggestion from https://github.com/sweetalert2/sweetalert2/issues/25#issuecomment-359161812
A better option here might have been to use em with a higher element given an rem factor. This way it is easy to override the base value with one css setting.
There's only one CSS setting (SCSS var) now ð
$swal2-font-size: 1rem;
Published by limonte almost 7 years ago
Why rems? Because of a11y. Different browsers/devices can have different base font-size. Now SweetAlert2 scales perfectly depends on user/device settings:
Well, almost perfectly :) The only one thing to finish is the animated icons (success/error). Stay tuned, the perfection is upcoming!
Published by limonte almost 7 years ago
To protect the plugin from similar mistakes in future, these actions were taken:
aria-live
: "assertive"
for modals, "polite"
for toasts (#746).swal2-toast-shown
to ignore list for default overflow rules (#738)