Toaster

Docs & Examples

• winduum
• winduum-stimulus

Source

• Toaster.css
• Toaster.js

Example

<ol class="x-toaster items-end">
    <li class="x-toast" role="status" aria-live="assertive" aria-atomic="true" data-controller="x-toast" data-x-toast-show-value="{}">
        <div class="x-toast-content">
            <div class="flex-col">
                <div class="x-title">Hello toast</div>
                <div class="x-text">Fresh toast from oven</div>
            </div>
            <button class="x-button muted ml-auto" data-action="x-toast#close">Close</button>
        </div>
    </li>
    <li class="x-toast" role="status" aria-live="assertive" aria-atomic="true" data-controller="x-toast" data-x-toast-show-value="{}">
        <div class="x-toast-content">
            <div class="flex-col">
                <div class="x-title">Hello toast 2</div>
                <div class="x-text">Fresh toast from oven</div>
            </div>
            <button class="x-button muted ml-auto" data-action="x-toast#close">Close</button>
        </div>
    </li>
</ol>

Stimulus Actions

close

Closes all toast in toaster. You can add any params from options via Invoke params. Alternatively, you can use classic Action if the action is inside toaster.

<button class="x-button" data-invoke-action="x-toaster#close" data-invoke-target=".x-toaster">
 Empty that toaster    
</button>