Coder Social home page Coder Social logo

sweet-alert's Introduction

Total Downloads Latest Stable Version License Support me on Patreon Support me on Liberapay

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');
    }
}

SuccessAlert

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')],
    ]);
}

ErrorAlert

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');
    }
}

SuccessToast

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.');

SuccessAlert

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

InfoAlert

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

WarningAlert

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

QuestionAlert

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

ErrorAlert

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');

HtmlAlert

Toast

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

SuccessToast

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

InfoToast

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

WarningToast

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

QuestionToast

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

ErrorToast

Contributing

Please see CONTRIBUTING and CODE_OF_CONDUCT for details.

Credits

Connect with Me

License

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

Made ❤️ with Pakistan

sweet-alert's People

Contributors

realrashid avatar

Stargazers

John F. Mandon avatar

Watchers

James Cloos avatar John F. Mandon avatar

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.