https://github.com/craftkit/craft-widget-toast
Toast is a Craft-UIKit component that provides a simple way to display a message to the user.
https://github.com/craftkit/craft-widget-toast
Last synced: 22 days ago
JSON representation
Toast is a Craft-UIKit component that provides a simple way to display a message to the user.
- Host: GitHub
- URL: https://github.com/craftkit/craft-widget-toast
- Owner: craftkit
- Created: 2022-09-25T06:58:46.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-10-28T05:58:48.000Z (over 3 years ago)
- Last Synced: 2026-05-15T10:41:56.925Z (2 months ago)
- Language: JavaScript
- Size: 40 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Toast for Craft-UIKit
Toast is a Craft-UIKit component that provides a simple way to display a message to the user. It is a non-intrusive message that appears on the screen for a short period of time and then disappears.
After duration time passed, callback will be called if it is provided. At this point, content of the toast will be `unloadView()`ed, but the toast itself will remain in the DOM, so you can use it again.
## Installation
```bash
npm install @craftkit/craft-widget-toast
```
## Usage
```js
import * as Craft from "@craftkit/craft-uikit";
import * as Toast from "@craftkit/craft-widget-toast";
Craft.usePackage(Toast);
class Page extends Craft.UI.View {
toast() {
const toast = new Craft.Widget.Toast();
Craft.Core.Context.getRootViewController().appendView(toast);
toast.show({
message: "Hello World!",
callback: () => {
toast.removeFromParent();
toast.unloadView();
}
});
}
template(componentId) {
return `
Toast
`;
}
}
```
## API
### `Toast#show(options)`
Displays a toast message.
#### Arguments
- `options` (`string` | `object`): The message to display or an object with the following properties:
- `title` (`string`): The title of the toast message.
- `message` (`string`): The message to display.
- `color` (`string`): The color of the toast message.
- `opacity` (`number`): The opacity of the toast message.
- `duration` (`number`): The duration in milliseconds to display the toast message. Defaults to `3000`.
- `callback` (`function`): A callback function to execute when the toast message is dismissed.
## License
MIT