|
<div class="docs-content" data-render>
|
|
# dp-toast
|
|
|
|
A transient notification host. It stacks short messages in the bottom-right corner and fades
|
|
each one out. `Application.js` creates a single instance, reachable as `app.toast`.
|
|
|
|
Source: `static/js/components/AppToast.js`.
|
|
|
|
## Methods
|
|
|
|
| Method | Description |
|
|
|---|---|
|
|
| `show(message, options)` | Display `message`. Options: `type` (`info`, `success`, `error`; default `info`) and `ms` (lifetime in milliseconds, default `3000`). Returns the toast element. |
|
|
|
|
## Usage
|
|
|
|
```html
|
|
<dp-toast></dp-toast>
|
|
```
|
|
|
|
```javascript
|
|
app.toast.show("Saved", { type: "success" });
|
|
app.toast.show("Something went wrong", { type: "error", ms: 5000 });
|
|
```
|
|
|
|
The element renders nothing until `show` is called.
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<div class="component-demo-title">Live example</div>
|
|
<div class="component-demo-stage">
|
|
<button type="button" class="btn btn-secondary" data-toast="info">Info</button>
|
|
<button type="button" class="btn btn-primary" data-toast="success">Success</button>
|
|
<button type="button" class="btn btn-danger" data-toast="error">Error</button>
|
|
</div>
|
|
<dp-toast id="toast-demo"></dp-toast>
|
|
</div>
|
|
<script type="module">
|
|
import "{{ static_url('/static/js/components/AppToast.js') }}";
|
|
const toast = document.getElementById("toast-demo");
|
|
const messages = { info: "Heads up", success: "Saved", error: "Something went wrong" };
|
|
document.querySelectorAll("[data-toast]").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
const type = btn.getAttribute("data-toast");
|
|
toast.show(messages[type], { type });
|
|
});
|
|
});
|
|
</script>
|