note: if you are using sweet-alert v1.0 you can get READMEfor v1.0 from here

Introduction

A BEAUTIFUL, RESPONSIVE, CUSTOMIZABLE, ACCESSIBLE (WAI-ARIA) REPLACEMENT FOR JAVASCRIPT'S POPUP BOXES

ZERO DEPENDENCIES

Install

To get started with SweetAlert2, use Composer to add the package to your project's dependencies:

composer require realrashid/sweet-alert

Configuration

Note, Optional in Laravel 5.5 or +

After installing the sweet-alert package, register the RealRashid\SweetAlert\SweetAlertServiceProvider::class in your config/app.php configuration file:

'providers' => [
    // Other service providers...

    RealRashid\SweetAlert\SweetAlertServiceProvider::class,
],

Also, add the Alert facade to the aliases array in your app configuration file:

'Alert' => RealRashid\SweetAlert\Facades\Alert::class,

Import SweetAlert 2 Library

in your master layout

<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>

and include sweetalert view

@include('sweetalert::alert')

Include the sweetalert view below the cdn link in your layout!

Usage

Using Facade

Import Alert Facade first!

use RealRashid\SweetAlert\Facades\Alert; or Use Alert; in your controller

• Alert::alert('Title', 'Message', 'Type');
• Alert::success('Success Title', 'Success Message');
• Alert::info('Info Title', 'Info Message');
• Alert::warning('Warning Title', 'Warning Message');
• Alert::error('Error Title', 'Error Message');
• Alert::question('Question Title', 'Question Message');
• Alert::html('Html Title', 'Html Code', 'Type');
• Alert::toast('Toast Message', 'Toast Type', 'Toast Position');

Using the helper function

Alert

• alert('Title','Lorem Lorem Lorem', 'success');

• alert()->success('Title','Lorem Lorem Lorem');

• alert()->info('Title','Lorem Lorem Lorem');

• alert()->warning('Title','Lorem Lorem Lorem');

• alert()->question('Title','Lorem Lorem Lorem');

• alert()->error('Title','Lorem Lorem Lorem');

• alert()->html('<i>HTML</i> <u>example</u>'," You can use <b>bold text</b>, <a href='//github.com'>links</a> and other HTML tags ",'success');

Toast

• toast('Your Post as been submited!','success','top-right');

Demo

Success Alert

/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
*/
public function store(PostRequest $request)
{
    $post = Post::create($request->all());

    if ($post) {
        alert()->success('Post Created', 'Successfully');
        return redirect()->route('posts.index');
    }
}

Error Alert

 /**
 * Get the failed login response instance.
 *
 * @param  \Illuminate\Http\Request  $request
* @return \Symfony\Component\HttpFoundation\Response
*
* @throws \Illuminate\Validation\ValidationException
*/
protected function sendFailedLoginResponse(Request $request)
{
    alert()->error('Oops...', 'Something went wrong!');

    throw ValidationException::withMessages([
        $this->username() => [trans('auth.failed')],
    ]);
}

Success Toast

/**
 * Remove the specified resource from storage.
 *
 * @param  \App\Post  $post
 * @return \Illuminate\Http\Response
*/
public function destroy($id)
{
    $post = Post::find($id);

    $post->delete();

    if ($post) {
        toast('Post Deleted Successfully','success','top-right');
        return redirect()->route('posts.index');
    }
}

Methods Definition

Alert Methods

Method	Argument
alert()	$title, $message, $type
alert()->success()	$title, $message
alert()->info()	$title, $message
alert()->warning()	$title, $message
alert()->error()	$title, $message
alert()->question()	$title, $message
alert()->html()	$htmltitle, $htmlCode, $type
toast()	$message, $type, $position

Chain Methods

Chain Method	Argument	Snippet
persistent()	$showConfirmBtn = true, $showCloseBtn = false	alert()->success('Alert Persistent', 'Successfully')->persistent(false,true);
autoClose()	$milliseconds = 5000	alert()->info('I am going to close after', '5 seconds')->autoClose(5000);
showConfirmButton()	$btnText = 'Ok', $btnColor = '#3085d6'	alert()->info('Info', 'Alert')->showConfirmButton('Button Text','#3085d6');
showCancelButton()	$btnText = 'Cencel', $btnColor = '#aaa'	alert()->question('Is Post Created', 'Successfully?)->showCancelButton('Button Text','#aaa');
showCloseButton()	$closeButtonAriaLabel = 'aria-label'	alert()->warning('Post Created', 'Successfully')->showCloseButton('aria-label');
footer()	$htmlcode	alert()->error('Oops...', 'Something went wrong!')->footer('<a href>Why do I have this issue?</a>');
toToast()	$position = 'top-right'	alert()->success('Post Created', 'Successfully')->toToast();

can also support multiple chaining

alert()
    ->error('Oops...', 'Something went wrong!')
    ->footer('<a href>Why do I have this issue?</a>')
    ->showConfirmButton()
    ->showCancelButton()
    ->showCloseButton()
    ->autoClose(5000);

Screenshots

Alert

Success Alert

alert()->success('SuccessAlert','Lorem ipsum dolor sit amet.');

Info Alert

alert()->info('InfoAlert','Lorem ipsum dolor sit amet.');

Warning Alert

alert()->warning('WarningAlert','Lorem ipsum dolor sit amet.');

Question Alert

alert()->question('QuestionAlert','Lorem ipsum dolor sit amet.');

Error Alert

alert()->error('ErrorAlert','Lorem ipsum dolor sit amet.');

Html Alert

alert()->html('<i>HTML</i> <u>example</u>',"
  You can use <b>bold text</b>,
  <a href='//github.com'>links</a>
  and other HTML tags
",'success');

Toast

Success Toast

toast('Success Toast','success','top-right');

Info Toast

toast('Info Toast','info','top-right');

Warning Toast

toast('Warning Toast','warning','top-right');

Question Toast

toast('Question Toast','question','top-right');

Error Toast

toast('Error Toast','error','top-right');

Contributing

Please see CONTRIBUTING and CODE_OF_CONDUCT for details.

Credits

• SweetAlert2

Connect with Me

• Website: http://realrashid.com
• Email: [email protected]
• Twitter: http://twitter.com/rashidali05
• Facebook: https://www.facebook.com/rashidali05
• GitHub: https://github.com/realrashid

License

SweetAlert2 is open-sourced software licensed under the MIT License (MIT). Please see License File for more information.

Made ❤️ with Pakistan