SweetAlert2 Recipe Gallery - Code Examples for Specific Tasks SweetAlert2 Recipe Gallery - Code Examples for Specific Tasks Recipe Gallery A collection of easy-to-digest code examples for specific tasks in about 30 lines of code or less Queue with Progress Steps Bootstrap 5 + custom loader Custom Icon React example React Router example Yes No Cancel Dialog Modal with iframe inside Draw Attention Persistent Dialog Colored Toasts Crop User Image with
Yes No Cancel Dialog - GitHub Pages Yes No Cancel Dialog Yes No Cancel Dialog You can reorder buttons by using the CSS property order The gap between buttons can be achieved with margin-right: auto
SweetAlert2 + Laravel You can now run Swal::fire () anywhere in your Laravel application (controllers, middleware, etc ) to show a SweetAlert2 alert: use SweetAlert2 \ Laravel \ Swal;
Bootstrap 5 + custom loader - GitHub Pages Bootstrap 5 + custom loader Bootstrap 5 + custom loader Read https: github com sweetalert2 sweetalert2 issues 374 for more details
SweetAlert2 + React Router Learn how to integrate SweetAlert2 with React Router for creating interactive alerts in your web applications
Sidebars and Drawers - GitHub Pages Sidebars and Drawers Sidebars and Drawers (Left, Right, Top, Bottom) In this example custom animations are powered by Animate css, but it's possible to use any custom animations
input [number] + input [range] - GitHub Pages input [number] + input [range] input [number] + input [range] Using the input: 'range' may have the side effect to be difficult to use on small screen touch devices On such devices is more difficult to provide a fine grained control on the input The 'range' input in Swal2 is designed to have only an output and no input Alternatively, a range input with a number input can be achived