Components - PNotify
PNotify is a JavaScript
notification library, formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. PNotify supports desktop notifications, modulues, stacks and flexible theming. Desktop notifications are based on the web notifications draft. If desktop notifications are not available or not allowed, PNotify will fall back to displaying the notice as a regular, in-browser notice.
| Solid color notifications | ||
|---|---|---|
| Primary notice | Primary notice. To use, add .bg-primary color class to the plugin configuration options |
|
| Danger notice | Danger notice. To use, add .bg-danger color class to the plugin configuration options |
|
| Success notice | Success notice. To use, add .bg-success color class to the plugin configuration options |
|
| Warning notice | Warning notice. To use, add .bg-warning color class to the plugin configuration options |
|
| Info notice | Info notice. To use, add .bg-info color class to the plugin configuration options |
|
| Custom color notice | Notice with custom background color. To use, add custom .bg-* color class to the plugin configuration options |
|
| Left icon | Solid color notification with left icon. To use, add 'bg-* alert-styled-left' to the addclass: '...' option |
|
| Right icon | Solid color notification with right icon. To use, add 'bg-* alert-styled-right' to the addclass: '...' option |
|
| Basic notifications | ||
| Default notice | Basic pnotify notification. All notification color styles correspond to the Boostrap's alert component |
|
| Danger notice | Danger notice. To use, add type: 'error' to the plugin configuration |
|
| Success notice | Success notice. To use, add type: 'success' to the plugin configuration |
|
| Warning notice | Warning notice. To use, add type: 'warning' to the plugin configuration |
|
| Info notice | Info notice. To use, add type: 'info' to the plugin configuration |
|
| Left positioned icon | Notification with left positioned icon. To use, add 'alert-styled-left' to the addclass: '...' option |
|
| Right positioned icon | Notification with right positioned icon. To use, add 'alert-styled-right' to the addclass: '...' option |
|
| Display arrow | Display arrow in styled notifications. To use, add 'alert-arrow-left' or '*-right' to the addclass: '...' option |
|
| Notice with custom color | Notification with custom background/border/text color. Text, background and border color can be changed by adding proper classes to the plugin configuration | |
| Desktop notifications | ||
| Default notice | The first time you click one of these buttons, you will be asked to grant permission for this site to show notices. Then you can click them again to see the desktop notification | |
| Danger notice | Danger desktop notification using a custom contextual icon. If permission denied, this icon will be hidden | |
| Success notice | Success desktop notification using a custom contextual icon. If permission denied, this icon will be hidden | |
| Warning notice | Warning desktop notification using a custom contextual icon. If permission denied, this icon will be hidden | |
| Info notice | Info desktop notification using a custom contextual icon. If permission denied, this icon will be hidden | |
| Notification options | ||
| No title | Notification without title. This is a default option, the title won't be shown if it isn't specified in notification configuration |
|
| Rich notice | By default notification supports rich content, including typography components, links, icons, buttons etc |
|
| Click to close | Notification can be closed on a closer button click or on a notification itself via click() event |
|
| Form notice | Notification with form components. Form is inserted as a DOM object |
|
| Sticky notice | Sticky notification. To use, add hide: false to the notification configuration |
|
| No sticky button | Notification with hidden sticky button. To use, add button.sticker: false to the notification config |
|
| Permanent buttons | By default, notification control buttons appear on hover. To make them always visible, add buttons.closer_hover: false |
|
| Permanotice | To show permanent notification, make it sticky and hide control buttons |
|
| PNotify modules | ||
| Confirmation | Confirmation dialog with callbacks. To use, add confirm.confirm: true to the notice config |
|
| Prompt | Prompt dialog with callbacks. To use, add confirm.prompt: true to the notice config |
|
| Multi line | Multi line prompt dialog with textarea. To use, add prompt_multi_line: true to the notice config |
|
| Custom buttons | Notification with custom buttons and callbacks |
|
| With callbacks | Notification callbacks. Available callbacks: before and after init, before and after open, before and after close |
|
| Switching notices | PNotify supports dynamic notification change. Here notifications are switching using before_close callback |
|
| Progress loader | Notification with dynamic progressbar. Here before_open callback is used |
|
| Dynamic loader | Notification with dynamic content. The content changes in a given time interval using update() function |
|
| PNotify stacks | ||
| Top left | Top left stack. Moves down, then right. Pushes to stack top | |
| Bottom left | Bottom left stack. Moves right, then up. Pushes to stack top | |
| Bottom right | Bottom right stack. Moves up, then left. Pushes to stack bottom | |
| Custom left | Left stack with custom position. Moves right, then down. Pushes to stack bottom | |
| Custom right | Right stack with custom position. Moves left, then up. Pushes to stack top | |
| Top bar | Top bar stack style. Moves down, then right. Pushes to stack top | |
| Bottom bar | Bottom bar> stack style. Moves up, then right. Pushes to stack bottom | |