1.0.1 • Published 1 year ago
@chcodes-hamza/notifications-toast v1.0.1
Toast notification library & Custom element
This is a library which a class or a custom web component to display toast notifications in the positions that you configure.
Usage
With npm
Install the package using npm or yarn
npm i @chcodes-hamza/notifications-toast
# or
yarn add @chcodes-hamza/notifications-toastThen import it in your script
import "./node_modules/@chcodes-hamza/notifications-toast/dist/Toast.js"With unpkg.com
<script type="module" src="https://unpkg.com/@chcodes-hamza/notifications-toast"></script>Then use the custom element in your html <toast-notifications> </toast-notifications>.
<toast-notifications options='{
"text": "Custom element",
"position": "top-right",
"pauseOnHover": true,
"pauseOnFocusLoss": true,
"autoClose": 5000,
"type":"sucess"
}'></toast-notifications>Customization
Attributes
| Attribute | Type | Description |
|---|---|---|
| options | JSON | a JSON object that contains many properties |
Options Object:
| Option | Default | Description |
|---|---|---|
| text | empty | the text displayed in the toast |
| position | top-right | the postion where the toast will be displayed (top-right, top-left, top-center ,bottom-center, bottom-left , bottom-right) |
| pauseOnHover | true | the toast progress bar stops when it s hovred |
| pauseOnFocusLoss | true | the toast progress bar stops when you leave the current window |
| autoClose | 5000 ms | the toast will be closed automaticly after the 5000ms if you wnat to make it disappear manually put it false |
| type | default template | customize the type of the toast (danger, info , success, warning) |
| showProgress | true | enable the progress bar in the toast bottom |
| canClose | true | give ability to close the toast |
| onClose | ()=>{} | customize the action after the toast is closed, callback as input |
CSS Custom Properties
| Property |
|---|
| --text-color-default |
| --chcodes-notif-default |
| --chcodes-notif-default-progress |
| --chcodes-notif-info |
| --chcodes-notif-info-progress |
| --chcodes-notif-danger |
| --chcodes-notif-danger-progress |
| --chcodes-notif-warning |
| --chcodes-notif-warning-progress |
| --chcodes-notif-sucess |
| --chcodes-notif-sucess-progress |