Toaster

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>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/toaster/props/default.css" layer(theme);
@import "winduum/src/components/toaster/default.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-toaster-padding: 0.75rem;
    --x-toaster-margin-block: calc(var(--spacing) * 1);
  }
}

Winduum CSS Code

winduum/src/components/toaster/props/default.css

:root, :host {
  --x-toaster-padding: calc(var(--spacing) * 5);
  --x-toaster-margin-block: calc(var(--spacing) * 1);
}

winduum/src/components/toaster/default.css

.x-toaster {
  z-index: var(--x-toaster-z-index, var(--z-index-50));
  padding: var(--x-toaster-padding);
  margin-block: calc(var(--x-toaster-margin-block) * -1);
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  &:not(:has(> *)) {
    display: none;
  }
}

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>