Code Monkey home page Code Monkey logo

laravel-notification's Introduction

Laravel Livewire Notification (+ AlpineJS)

Latest Version on Packagist GitHub Code Style Action Status Total Downloads

Laravel Livewire Notification

Installation

You can install the package via composer:

composer require f1uder/laravel-notification

Publish the config file with:

php artisan vendor:publish --tag="laravel-notification"

Add css file (notification.css)

@import "../../public/vendor/laravel-notification/css/notification.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

Add code to template, after body tag

<body>
  <livewire:laravel-notification.notice/>
  ...
</body>

Usage Laravel

return redirect('/')->notice('message text', 'alert');
return redirect()->route('home')->notice('message text', 'info');

Usage Livewire component

$this->notice('message text', 'alert');
return redirect('/')->notice('message text', 'alert');

Usage alpineJS

$dispatch('notice', {message: 'message text', type: 'alert'});

Arguments

Usage: notice($message, $type, $timer, $title)

  • $message - Message.
  • $type - Notification type.
    • alert
    • info - default
    • success
  • $timer - 3000 default = 3 sec.
  • $title - Notification header. Default = null.

Config

config/notification.php

  • $timer - Notification display time in seconds.
  • $position - Notification position.
    • tr - Top right (default).
    • tl - Top left.
    • br - Bottom right.
    • bl - Bottom left.

License

The MIT License (MIT). Please see License File for more information.

laravel-notification's People

Contributors

f1uder avatar

Stargazers

 avatar  avatar  avatar

Watchers

 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.