Skip to content

v10.0.0
Compare
Choose a tag to compare
@limonte limonte released this 07 Sep 20:58
v10.0.0
790fe2f

🔴 Breaking change

For the sake of customization, the loader has been separated from the confirm button into its own DOM element (<div class="swal2-loader"></div>).

As a part of that breaking change, there's a new API param loaderHtml which allows to set custom HTML, e.g. SVG icon inside of the loader.

🎉 NEW FEATURES

🎉 The third DENY button

image

Swal.fire({
  title: 'Do you want to save the changes?',
  showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: `Save`,
  denyButtonText: `Don't save`,
}).then(function (result) {
  console.log(result)
  // Object {
  //   value: false,
  //   isConfirmed: false,
  //   isDenied: true,
  //   isDismissed: false
  // }
})
Swal.clickDeny()

These API params for the DENY button were added:

  • showDenyButton?: boolean; (default false)
  • denyButtonText?: string; (default 'No')
  • denyButtonColor?: string; (default undefined)
  • denyButtonAriaLabel?: string; (default '')
  • focusDeny?: boolean; (default false)
  • customClass.denyButton?: string (default undefined)

These API methods for the DENY button were added:

  • Swal.getDenyButton()
  • Swal.clickDeny()

🎉 New SCSS variables

// ACTIONS
$swal2-actions-padding: 0 1.6em !default;

// DENY BUTTON
$swal2-deny-button-order: null !default;
$swal2-deny-button-border: 0 !default;
$swal2-deny-button-border-radius: .25em !default;
$swal2-deny-button-background-color: #dd6b55 !default;
$swal2-deny-button-color: $swal2-white !default;
$swal2-deny-button-font-size: 1.0625em !default;

// LOADER
$swal2-loader-align-items: center !default;
$swal2-loader-justify-content: center !default;
$swal2-loader-width: 2.2em !default;
$swal2-loader-height: 2.2em !default;
$swal2-loader-margin: 0 1.875em !default;
$swal2-loader-animation: swal2-rotate-loading 1.5s linear 0s infinite normal !default;
$swal2-loader-border-width: .25em !default;
$swal2-loader-border-style: solid !default;
$swal2-loader-border-radius: 100% !default;
$swal2-loader-border-color: #3085d6 transparent #3085d6 transparent !default;

// CONFIRM BUTTON
$swal2-confirm-button-order: null !default;

// CANCEL BUTTON
$swal2-cancel-button-order: null !default;
Assets 2