Giter VIP home page Giter VIP logo

sweetalert's Introduction

SweetAlert 2

Laravel 5 Package for SweetAlert 2. Use this package to easily show SweetAlert prompts in your Laravel application.

Installation

  1. Use composer to install the package
$ composer require softon/sweetalert
  1. (Optional for Laravel 5.5) Add the service provider to the config/app.php file in Laravel
Softon\SweetAlert\SweetAlertServiceProvider::class,
  1. (Optional for Laravel 5.5) Add an alias for the Facade to the config/app.php file in Laravel
'SWAL' => Softon\SweetAlert\Facades\SWAL::class,
  1. Publish the config & views by running
$ php artisan vendor:publish

View

This package does have its own views to be included in your templates. But if you would like to tweak it or include your own you can use the views published in the resources/views/vendor/sweetalert directory.

This package also includes a SweetAlert2 CDN that you can include if you have not included the SweetAlert2 Javascript file from their website. The CDN view must be loaded first.

For built in views, you can use this in your blade templates before the closing body tag

@include('sweetalert::cdn')         // Optional needed only if SweetAlert2 files are not inserted by the developer 
@include('sweetalert::view')
@include('sweetalert::validator')   // Optional needed only to show form validation errors automatically

Or for the Published Views use this

@include('vendor.sweetalert.cdn')   // Optional needed only if SweetAlert2 files are not inserted by the developer
@include('vendor.sweetalert.view')
@include('vendor.sweetalert.validator')   // Optional needed only to show form validation errors automatically

Configuration

You can change the basic parameters of the package by referring to the SweetAlert2 documentations for more details.

Usage

You may use the SWAL Facade or the swal helper function to call the methods.

Showing a Message to User using the SWAL Facade:

use Softon\SweetAlert\Facades\SWAL;  

// Params: [Title,Text,Type,Options[]]
SWAL::message('Good Job','You have successfully logged In!','info');  
SWAL::message('Good Job','You have successfully logged In!','error');  
SWAL::message('Good Job','You have successfully logged In!','success',['timer'=>2000]);

// For All available options please refer the SweetAlert 2 Docs

Showing a Message to User using the swal helper function:

// Message Type Can be `warning`, `error`, `success`, `info` and `question`. Based on this there are some convinence function that can be used instead of the message method.:
swal('Your Title','Text');
swal()->message('Good Job','You have successfully logged In!','info');  
swal()->message('Good Job','You have successfully logged In!','error');  
swal()->message('Good Job','You have successfully logged In!','success',['timer'=>2000]);
// Params [Title, Text, Options]
swal()->warning('Good Job','You have successfully logged In!',[]);
swal()->error('Good Job','You have successfully logged In!',[]);
swal()->success('Good Job','You have successfully logged In!',[]);
swal()->info('Good Job','You have successfully logged In!',[]);
swal()->question('Good Job','You have successfully logged In!',[]);

To show modal which will autoclose after few seconds:

swal()->autoclose(2000)->message('Good Job','You have successfully logged In!','info'); 
swal()->autoclose(5000)->success('Good Job','You have successfully logged In!'); 

To show a toast modal which will autoclose after few seconds:

swal()->toast()->autoclose(2000)->message('Good Job','You have successfully logged In!','info'); 

To change confirm button text:

swal()->button('Close Me')->message('Good Job','You have successfully logged In!','info'); 

// Button Params [Button Text,Button Colour, SWAL Style Enable / Disable, Style Class for Buttons]
swal()->button('Close Me','#efefef',false,'btn btn-primary')->info('Good Job','You have successfully logged In!'); 

To change position of the modal:

// Possible Positions : `top`, `top-left`, `top-right`, `center`, `center-left`, `center-right`, `bottom`, `bottom-left`, or `bottom-right`
swal()->position('top')->message('Good Job','You have successfully logged In!','info'); 

You can chain any of these methods to combine the functionality:

swal()->position('bottom-right')->autoclose(3000)->toast()->message('This is A Custom Message');

sweetalert's People

Contributors

lopuk avatar nasrulhazim avatar softon avatar zymawy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

sweetalert's Issues

Usage documentation

Can you please provide some use cases with this wonderful package? i know this is straight forward and all but a few example with use cases will be very helpful. For instance how to use it to confirm a delete, etc. that sort of thing.

Laravel 8 Support

Thanks for a great package.

Are you accepting PRs for upgrades? Upgrading to laravel 8 for example?

Ok button showing

Ok button is showing after the message also with close x button on top-right.
how to disable
the ok button

All alerts have buttons - how do you remove the button?

This is working fine on Laravel but no matter what I do, there is always a button on the alert.

I wanted a simple 'Success!' modal with icon to flash up on the screen and then autoclose in a couple of seconds. I thought using 'false' would work…

swal()->button(false)->info('Good Job','You have successfully logged In!');

…but it doesn't. The button just says 'false' instead.

What parameter do I need to pass to remove the button from the modal?

P.S. I see in the config file that you can choose to show/hide the confirm and cancel buttons, but ideally would like to pass the option to do this via the swal() code.

Many thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.