Web ComponentThe latest version of this package is: 0.6.9, Opens in new window
Webcomponent for Toast Component
This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-wc/toast@0.6.9
Table of Contents
Usage
The <ids-toast>
-webcomponent operates as a factory for toasts to be displayed. Use events to trigger toasts.
With the given markup:
<ids-toast></ids-toast>
<script src="β¦toast-webcomponent.iife.js"></script>
And the event:
const _dispatchToastEvent = ({ ...args }) => {
const _event = new CustomEvent('ids:toast', {
bubbles: !0,
detail: {
payload: { ...args },
},
});
document.dispatchEvent(_event);
};
_dispatchToastEvent({
target: e.target,
toggle: () => {
console.info('toggle');
},
message: 'Short message',
type: 'info|success|warning|error',
icon: true || false,
action: () => {
console.info('action');
},
actionText: 'Undo',
close: () => {
console.info('close');
},
});
Options: Object
Name | Type | Default | Mandatory? |
---|---|---|---|
target |
Element |
Element the toast is initiated from | No |
toggle |
Function |
A callback to be used when the toast is toggled | No |
message |
String |
The mssage to display | Yes |
type |
String |
Type of toast | No |
icon |
Boolean |
Use icon? | No |
action |
Function |
A callback to be used when the action is used | No |
actionText |
String |
Text of the action button | Only if a callback for action is given |
close |
Function |
A callback to be used when the toast is closing | No |
Api
IDSToast
- Kind:
new IDSToast()
This Webcomponent is to be included on the page where you want to have toasts. An CustomEvent is fired, and an appropriate toast is displayed.
Example
// Example usage with the CustomEvent
const _dispatchToastEvent = ({ ...args }) => {
const _event = new CustomEvent('ids:toast', {
bubbles: !0,
detail: {
payload: { ...args }
}
});
document.dispatchEvent(_event);
};
_dispatchToastEvent({
target: e.target,
toggle: () => {
console.info('toggle');
},
message: 'Short message',
type: 'info|success|warning|error',
icon: true || false,
action: () => {
console.info('action');
},
actionText: 'Undo',
close: () => {
console.info('close');
}
});
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.3.7 (2022-03-09)
Miscellaneous chores
- reinstall (fa531f7)
0.3.6 (2022-03-09)
Miscellaneous chores
- reinstall (8482f7f)
0.3.5 (2022-03-08)
Miscellaneous chores
0.3.4 (2021-11-10)
Miscellaneous chores
- Manually testing inclusion of CHANGELOG.md (f91eb76)
0.3.0 (2021-11-10)
Miscellaneous chores
0.2.3 (2021-10-28)
Documentation Updates
Miscellaneous chores
0.2.1 (2021-10-14)
Miscellaneous chores
- π€ Update dependencies (079ff16)
0.2.0 (2021-10-14)
Miscellaneous chores
- π€ Update dependencies (a99466e)
0.1.0 (2021-10-01)
β BREAKING CHANGES
- 𧨠We are now serving IIFE files instead of UMD, for a better dev
experience when including scripts with script-tag
- 𧨠All webcomponent versions has been reset, due to new scope; @ids-wc
β Closes: 467386
Bug Fixes
-
π Rename required file to use IIFE, escape correctly (dff7a27)
-
π Use correct package for import after scope rename (3c819bd), closes #467386
Documentation Updates
Miscellaneous chores
-
π€ Remove babel, no longer required (9f6497c)
-
π€ Remove unneeded rc files (fdcac58)
-
π€ Remove usage of .npmignore, use files-prop instead (8b7c55e)
-
π€ Reset CHANGELOG.md files (bf1ef63)
-
π€ Reset versions for webcomponents, due to new scope (f540b01)
-
π€ Set correct output name (98da4f6)
-
π€ Update prettier rc files (7d0e3c9)
-
π€ Use correct dependencies after renaming of scope (38aba43), closes #467386
-
π€ Use iife instead of umd (ae0ebcc)
-
bootstrap (420cc99)
-
initial commit (8d74b20)
-
use correct import path (1fff2cb)