Toaster β
Make your toasts fly from the toaster!
View SourceΒUsage β
css
@import "winduum/src/components/toaster/index.css" layer(components);
@import "winduum/src/components/toast/index.css" layer(components);
js
import { insertToaster, insertToast, closeToast } from 'winduum/src/components/toaster'
document.querySelector('#insertToast').addEventListener('click', () => {
insertToaster(document.querySelector('dialog[open]') || document.body, {
classes: 'items-end'
})
insertToast(document.querySelector('.c-toaster'), {
title: 'Hello toast!',
text: 'Amazing toast!',
end: `<button class="ui-btn muted ml-auto" data-action="closeToast">Close</button>`
})
const closeToastButton = document.querySelectorAll('[data-action="closeToast"]')[document.querySelectorAll('[data-action="closeToast"]').length - 1]
closeToastButton.addEventListener('click', ({ currentTarget }) => {
closeToast(currentTarget.closest('.c-toast'))
})
})
Variants β
Installation β
Follow instructions for individual framework usage below
Example β
html
<button class="ui-btn" id="insertToast">Show toast</button>
<script type="module">
import { insertToaster, insertToast, closeToast } from 'winduum/src/components/toaster'
document.querySelector('#insertToast').addEventListener('click', () => {
insertToaster(document.querySelector('dialog[open]') || document.body, {
classes: 'items-end'
})
insertToast(document.querySelector('.c-toaster'), {
title: 'Hello toast!',
text: 'Amazing toast!',
end: `<button class="ui-btn muted ml-auto" data-action="closeToast">Close</button>`
})
const closeToastButton = document.querySelectorAll('[data-action="closeToast"]')[document.querySelectorAll('[data-action="closeToast"]').length - 1]
closeToastButton.addEventListener('click', ({ currentTarget }) => {
closeToast(currentTarget.closest('.c-toast'))
})
})
</script>
JavaScript API β
showToast
β
- Type:
(selector: HTMLElement, options?: ShowToastOptions) => Promise<void>
- Kind:
async
Applies an enter animation to existing toast.
Example β
js
import { showToast } from 'winduum/src/components/toaster'
document.querySelector('#showToast').addEventListener('click', async () => {
await showToast(document.querySelector('#toastElement'))
})
ShowToastOptions β
visibleClass β
- Type:
string
- Default:
in
autoHide β
- Type:
number
- Default:
null
heightProperty β
- Type:
string
- Default:
--c-toast-height
close β
- Type:
CloseToastOptions
- Default:
{}
closeToast
β
- Type:
(selector: HTMLElement, options?: CloseToastOptions) => Promise<void>
- Kind:
async
Applies an exit animation to existing toast and removes it from DOM.
Example β
js
import { showToast } from 'winduum/src/components/toaster'
document.querySelector('#closeToast').addEventListener('click', async () => {
await closeToast(document.querySelector('#toastElement'))
})
CloseToastOptions β
hiddenClass β
- Type:
string
- Default:
out
heightProperty β
- Type:
string
- Default:
--c-toast-height
insertToaster
β
- Type:
(element: HTMLElement, options?: InsertToasterOptions) => Promise<void>
- Kind:
async
Inserts a toaster into the DOM. Apply before inserting any toasts.
Example β
js
import { insertToaster } from 'winduum/src/components/toaster'
insertToaster(document.querySelector('dialog[open]') || document.body)
InsertToasterOptions β
classes β
- Type:
string
- Default:
''
A string representing a CSS classes, you can use it for positioning. Apply justify-start
or justify-end
or flex-col-reverse
to show toaster on top.
insertToast
β
- Type:
(element: HTMLElement, options?: InsertToastOptions) => Promise<void>
- Kind:
async
Inserts toast into a toaster.
Example β
js
import { insertToast } from 'winduum/src/components/toaster'
insertToast(document.querySelector('.c-toaster'), {
title: 'Hello toast!',
text: 'Amazing toast!',
show: {
autoHide: 3000
}
})
InsertToastOptions β
classes β
- Type:
string
- Default:
undefined
A string representing a CSS classes, you can use it for additional styling.
title β
- Type:
string
- Default:
''
Title for the toast.
text β
- Type:
string
- Default:
''
Text for the toast.
start β
- Type:
string
- Default:
''
HTML content you can add to the start of the toast.
end β
- Type:
string
- Default:
''
HTML content you can add to the end of the toast.
show β
- Type:
ShowToastOptions
- Default:
{}
closeToaster
β
- Type:
(selector: HTMLElement, options?: CloseToastOptions) => Promise<void>
- Kind:
async
All toasts are closed and toaster is removed from DOM.
Example β
js
import { showToast } from 'winduum/src/components/toaster'
document.querySelector('#closeToaster').addEventListener('click', async () => {
await closeToaster(document.querySelector('.c-toaster'))
})