Skip to content
Branch: master
Find file History
semantic-release-bot chore(release): 3.1.0 [skip ci]
# [3.1.0](v3.0.7...v3.1.0) (2019-12-10)

### Features

* add WordPress admin theme ([#47](#47)) ([84263a1](84263a1))
Latest commit 3a9b486 Dec 10, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md feat: add WordPress admin theme (#47) Dec 10, 2019
animations.scss feat: add WordPress admin theme (#47) Dec 10, 2019
package.json chore(release): 3.1.0 [skip ci] Dec 10, 2019
wordpress-admin.scss feat: add WordPress admin theme (#47) Dec 10, 2019

README.md

Wordpress-admin Theme for SweetAlert2

npm version

Installation

npm install --save sweetalert2 @sweetalert2/theme-wordpress-admin

Usage

With CSS:

<!-- Include the Wordpress-admin theme -->
<link rel="stylesheet" href="@sweetalert2/theme-wordpress-admin/wordpress-admin.css">

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

With SASS:

your-app.js:

import Swal from 'sweetalert2/src/sweetalert2.js'

your-app.scss:

@import '~@sweetalert2/theme-wordpress-admin/wordpress-admin.scss';

Integration

To more closely match the WordPress style toast messages, use the following to get started:

const notify = Swal.mixin({
  toast: true,
  position: 'bottom-start',
  showConfirmButton: false,
  timer: 6000,
  onBeforeOpen: (toast) => {
    
    // Offset the toast message based on the admin menu size
    var dir = 'rtl' === document.dir ? 'right' : 'left'
    toast.parentElement.style[dir] = document.getElementById('adminmenu').offsetWidth + 'px'
  }
})

Further, when using icons you may wish to use WordPress Dashicons.

notify.fire({
  icon: 'success',
  iconHtml: '<div class="dashicons dashicons-yes" style="transform: scale(3);"></div>',
  title: 'Settings updated.',
})

Using modals as another example, you can add the Dashicon's megaphone icon.

Swal.fire({
  title: 'Hey, we have something to say!',
  confirmButtonText: 'Let\'s do this',
  showCancelButton: false,
  icon: 'info',
  iconHtml: '<div class="dashicons dashicons-megaphone" style="transform: scale(3.5);"></div>',
  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.'
})

If you would like to use this theme outside of the WordPress admin area, you might want to set the font-family to use the font WordPress uses:

.swal2-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
You can’t perform that action at this time.