Notification

Unlike the Alert component, the notification component is not permanently visible on the screen and is useful when you want to provide feedback to your users. The BladewindUI Notification component is solely triggered via Javascript.

To use this component simply include it anywhere on your page. If you intend to use this throughout your app it will be best to include the component in say your header page.

        
            <x-bladewind::notification />

Now you can trigger a notification using the javascript helper function. The function accepts four parameters listed below.

        
            <script>
                showNotification(title, message, type, dismiss_in);
            </script>

Parameter	Required?	Description
title	optional	Title of the notification. This should usually be very brief
message	required	Meesage to display to the user in the body of the notification. This can either be brief or descriptive.
type	optional	Type of notification to be displayed. Default is success. Available values are `success` `info` `warning` `error`. The type determines the color of the notification and the icon to be displayed.
dismiss_in	optional	Numeric. In how many seconds should the notification be dismissed if the user does not explicitly click on the close button. Default is 15 seconds. Note the value is in seconds and not milliseconds. So 20 will mean 20 seconds.

        
            <script>
                showNotification('Delete Successful', 'Your file was deleted successfully');
            </script>

        
            <x-bladewind.button
                onclick="showNotification(
                    'Download Successful',
                    'Your download completed successfully')">
                success
            </x-bladewind.button>  

            <x-bladewind.button
                onclick="showNotification(
                    'Delete Failed',
                    'Your message could not be deleted. Try again',
                    'error')">
                error
            </x-bladewind.button>  

            <x-bladewind.button
                onclick="showNotification(
                    'Low Disk Space',
                    `You have used 20gb of your 25gb storage space. <a href='#'>Upgrade soon</a>`,
                    'warning')">
                warning
            </x-bladewind.button>  

            <x-bladewind.button
                onclick="showNotification(
                    'Invitation Accepted',
                    `Samuel just accepted your invitation to join BladewindUI Inc. <a href='#'>Say Hello</a>`,
                    'info')">
                info
            </x-bladewind.button>

Multiple notifications can be triggered. In this case, they are displayed as a stack in chronological order. The latest notification is always on top.

Targeting Existing Notifications

By default, the BladewindUI notification components creates a new notification every time the showNotification() function is called. Let's take for example, you have a file picker that triggers an error an time the user selects the wrong file type. Typically a notification takes 15 seconds to be hidden. If your user selects the wrong file quickly 3 times, the same error message will be displayed three times.

To prevent that behaviour, you can give the notification a name. BladewindUI will check if a notification with that name already exists. If it does, it will re-render the existing notification. If it does not, it will create a new notification.

        
            <x-bladewind.button
                onclick="showNotification(
                    'Delete Failed',
                    'Your message could not be deleted. Try again',
                    'error',
                    15,
                    'regular',
                    'same_one')">
                Same Notification
            </x-bladewind.button>

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Notification component.

IMPORTANT: All component text/labels can be found in lang/bladewind.php. You can translate these into your preferred languages

Option	Default	Available Values
position	top-right	Defines where the notification should be displayed. Available values are `top-right` `bottom-right` `top-left` `bottom-left`
nonce	null	Used when implementing context security policies and require to pass a nonce to inline scripts. For convenience, you can set your `nonce` value in the `config/bladewind.php` file under the "script" key. This value will be used everywhere nonce is required.

Notification with all attributes defined

        
            <x-bladewind::notification position="top-right" />

The source file for this component is available in resources > views > components > bladewind > notification.blade.php