1.0.0 • Published 2 years ago
web-in-app-notification v1.0.0
web-in-app-notification
A javascript Library for to create awesome Notifications
Features
- Create in App Notification
- Many useful opions
- Embed interactive contents
Screenshot
Install
script
<script src="path/to/dist/index.min.js"></script>
<script src="https://unpkg.com/web-in-app-notification/dist/index.min.js"><script>
CSS
<link rel="stylesheet" href="path/to/dist/style.css">
<link rel="stylesheet" href="https://unpkg.com/web-in-app-notification/dist/style.css">
How to use
create new notification
const myNotification = new inAppNotification({options});
options
All properties can be omitted.
If these properties are omitted, the default values will be applied.
{
time: number, //default:5000
type: "top" | "bottom-right" | "top-right", //default:bottom-right
title: string, //default:""
description: string, //default:""
attachment: inAppNotificationImage, //default:null
interactions: {
buttons:inAppNotificationButton[], //default:null
form:inAppNotificationInput //default:null
},
thumbnail: inAppNotificationImage, //default:null
header: string, //defalut:""
footer: string, //default:""
controls: "visible" | "x" | "menu" | "hidden", //default:"visible"
onclick: Function, //default:null
appendTo: HTMLElement, //default:document.body
sound: HTMLAudioElement | string, //default:null
menus: inAppNotificationMenuOption[] //default:null
}
time
: Displayed duration(ms)type
: Display positiontitle
: Title text (bold)description
: Description of notificationattachment
: Image attachmentinteractions
: Embed an interative contentsthumbnail
: Small image in headerheader
: Header text (small and gray)footer
: Footer text (small and gray)onclick
: The action to be performed when clickedappendTo
: Parent Element of the Notificationsound
: Play a soundmenus
: Advanced options
inAppNotificationImage
Embed an image in the notification.
{
src: string,
alt: string
}
src
: Image URL.alt
: Alternative text (can be omitted)
inAppNotificatonButton
{
text: string,
onclick: Function,
clickToHide:boolean
}
text
: Button textonclick
: The action to be performed when clickedclickToHide
: If true, the notification disappear when clicked (can be omitted)
inAppNotificationInput
{
placeholder: string,
onsubmit: Function,
submitToHide:boolean
}
placeholder
: placeholder text (can be omitted)onclick
: The action to be performed when submitclickToHide
: If true, the notification disappear when clicked (can be omitted)
inAppNotificationMenuOption
{
text: string,
onclick: Function
}
text
: Button textonclick
: The action to be performed when clicked
Advanced Options menu
click three dots
1.0.0
2 years ago