---Loading---

Notifications

Learn how to create notifications components with phenix javascript and css utilities

Overview

the Notifications javascript plugin of phenix is quite simple and you can see an example of how to use it below its a javascript function that you fire whenever you need to show-up a message to the user with a timeout to disappear and it comes with a few options :

  • type which defines the type of message for colorful notifications like errors or success
  • message which represents your message to the user at the moment of action
  • duration for defining how much time it has to wait before it removes the message
  • position defining where the message should show-up

and you can customize the notifications style by targeting the .px-notfications for the main wrapper and .px-item for each notification, you put in there.

Position Example
//=====> When Click on Button <=====//
Phenix('.notification-demo').on('click', isClicked => {
//====> Get Data <====//
let type = isClicked.target.getAttribute('data-type'),
message = isClicked.target.getAttribute('data-messge'),
position = isClicked.target.getAttribute('data-position');
//====> Show Notifications <====//
Phenix(document).notifications({
type : type, //=== Message Type [normal, error, success, warning]
message : message, //=== Message Content
position : position, //=== Message Position [top,center,bottom] [start,center,end]
});
});
//=====> When Click on Button <=====//
Phenix('.action-button').on('click', isClicked => {
//====> Show Notifications <====//
Phenix(document).notifications({
type : string, //=== Message Type [normal, error, success, warning]
message : string, //=== Message Content
duration : number, //=== Message Timeout
position : [y,x], //=== Message Position [top,center,bottom] [start,center,end]
});
});

Table of Content