Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Overview Official Website

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

Usage

Sweetalert2's CSS and Javascript files are bundled in the vender.min.css and vendor.js and globally included in all pages.

Basic#
                                                                      
                                                                           <button type="button" class="btn btn-primary" id="sweetalert-basic">Click me</button>
                                                                      
                                                                 
                                                                 
                                                                      if (document.getElementById("sweetalert-basic"))
                                                                           document.getElementById("sweetalert-basic").addEventListener("click", function () {
                                                                                Swal.fire({
                                                                                     title: 'Any fool can use a computer',
                                                                                     confirmButtonClass: 'btn btn-primary w-xs mt-2',
                                                                                     buttonsStyling: false,
                                                                                     showCloseButton: true
                                                                                })
                                                                           });
                                                                 
                                                            
A Title with a Text Under#
                                                                      
                                                                           <button type="button" class="btn btn-primary" id="sweetalert-title">Click me</button>
                                                                      
                                                                 
                                                                 
                                                                      //A title with a text under
                                                                      if (document.getElementById("sweetalert-title"))
                                                                      document.getElementById("sweetalert-title").addEventListener("click", function () {
                                                                      Swal.fire({         
                                                                           title: "The Internet?",
                                                                           text: 'That thing is still around?',
                                                                           icon: 'question',
                                                                           confirmButtonClass: 'btn btn-primary w-xs mt-2',
                                                                           buttonsStyling: false,
                                                                           showCloseButton: false
                                                                      })
                                                                      });
                                                                 
                                                            
Message#
                                                                      
                                                                           <button type="button" class="btn btn-success" id="sweetalert-success">Success</button>
                                                                           <button type="button" class="btn btn-warning" id="sweetalert-warning">Warning</button>
                                                                           <button type="button" class="btn btn-info" id="sweetalert-info">Info</button>
                                                                           <button type="button" class="btn btn-danger" id="sweetalert-error">Error</button>
                                                                      
                                                                 
                                                                      
                                                                           
                                                                           //Success Message
                                                                           if (document.getElementById("sweetalert-success"))
                                                                           document.getElementById("sweetalert-success").addEventListener("click", function () {
                                                                                Swal.fire({
                                                                                     title: 'Good job!',
                                                                                     text: 'You clicked the button!',
                                                                                     icon: 'success',
                                                                                     showCancelButton: true,
                                                                                     confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
                                                                                     cancelButtonClass: 'btn btn-danger w-xs mt-2',
                                                                                     buttonsStyling: false,
                                                                                     showCloseButton: false
                                                                                })
                                                                           });

                                                                           //error Message
                                                                           if (document.getElementById("sweetalert-error"))
                                                                           document.getElementById("sweetalert-error").addEventListener("click", function () {
                                                                                Swal.fire({
                                                                                     title: 'Oops...',
                                                                                     text: 'Something went wrong!',
                                                                                     icon: 'error',
                                                                                     confirmButtonClass: 'btn btn-primary w-xs mt-2',
                                                                                     buttonsStyling: false,
                                                                                     footer: '<a href="">Why do I have this issue?</a>',
                                                                                     showCloseButton: false
                                                                                })
                                                                           });


                                                                           //info Message
                                                                           if (document.getElementById("sweetalert-info"))
                                                                           document.getElementById("sweetalert-info").addEventListener("click", function () {
                                                                                Swal.fire({
                                                                                     title: 'Oops...',
                                                                                     text: 'Something went wrong!',
                                                                                     icon: 'info',
                                                                                     confirmButtonClass: 'btn btn-primary w-xs mt-2',
                                                                                     buttonsStyling: false,
                                                                                     footer: '<a href="">Why do I have this issue?</a>',
                                                                                     showCloseButton: false
                                                                                })
                                                                           });

                                                                           //Warning Message
                                                                           if (document.getElementById("sweetalert-warning"))
                                                                           document.getElementById("sweetalert-warning").addEventListener("click", function () {
                                                                                Swal.fire({
                                                                                     title: 'Oops...',
                                                                                     text: 'Something went wrong!',
                                                                                     icon: 'warning',
                                                                                     confirmButtonClass: 'btn btn-primary w-xs mt-2',
                                                                                     buttonsStyling: false,
                                                                                     footer: '<a href="">Why do I have this issue?</a>',
                                                                                     showCloseButton: false
                                                                                })
                                                                           });

                                                                      
                                                                 
Long content Images Message#
                                                                      
                                                                           <button type="button" class="btn btn-primary" id="sweetalert-longcontent">Click me</button>
                                                                      
                                                                 
                                                                      
                                                                           // long content
                                                                           if (document.getElementById("sweetalert-longcontent"))
                                                                           document.getElementById("sweetalert-longcontent").addEventListener("click", function () {
                                                                                Swal.fire({
                                                                                     imageUrl: 'https://placeholder.pics/svg/300x1500',
                                                                                     imageHeight: 1500,
                                                                                     imageAlt: 'A tall image',
                                                                                     confirmButtonClass: 'btn btn-primary w-xs mt-2',
                                                                                     buttonsStyling: false,
                                                                                     showCloseButton: false
                                                                                })
                                                                           });

                                                                      
                                                                 
Parameter#
                                                                      
                                                                           <button type="button" class="btn btn-primary" id="sweetalert-params">Click me</button>
                                                                      
                                                                 
                                                                 
                                                                      //Parameter
                                                                      if (document.getElementById("sweetalert-params"))
                                                                      document.getElementById("sweetalert-params").addEventListener("click", function () {
                                                                           Swal.fire({
                                                                                title: 'Are you sure?',
                                                                                text: "You won't be able to revert this!",
                                                                                icon: 'warning',
                                                                                showCancelButton: true,
                                                                                confirmButtonText: 'Yes, delete it!',
                                                                                cancelButtonText: 'No, cancel!',
                                                                                confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
                                                                                cancelButtonClass: 'btn btn-danger w-xs mt-2',
                                                                                buttonsStyling: false,
                                                                                showCloseButton: false
                                                                           }).then(function (result) {
                                                                                if (result.value) {
                                                                                     Swal.fire({
                                                                                          title: 'Deleted!',
                                                                                          text: 'Your file has been deleted.',
                                                                                          icon: 'success',
                                                                                          confirmButtonClass: 'btn btn-primary w-xs mt-2',
                                                                                          buttonsStyling: false
                                                                                     })
                                                                                } else if (
                                                                                     // Read more about handling dismissals
                                                                                     result.dismiss === Swal.DismissReason.cancel
                                                                                ) {
                                                                                     Swal.fire({
                                                                                          title: 'Cancelled',
                                                                                          text: 'Your imaginary file is safe :)',
                                                                                          icon: 'error',
                                                                                          confirmButtonClass: 'btn btn-primary mt-2',
                                                                                          buttonsStyling: false
                                                                                     })
                                                                                }
                                                                           });
                                                                      });
                                                                 
                                                            
© Larkon. Crafted by Techzaa