UNi Toasts

<uni-toasts /> is a robust Web Component built on the foundation of the uniopen design language. Its primary capability is delivering seamless message notifications across applications.

By utilizing the provided attributes and properties, developers can finely tune the rendering and behavior of individual toasts to match specific UI requirements. Furthermore, the component natively supports multi-toast stacking, offering a sophisticated presentation layer that elevates the overall messaging experience into something diverse and engaging.

Let's see what can <uni-toasts /> do ?

  • content：

  • stat：

  • maxcount：

  • action：

  • auto dismiss：

Basic Usage

<uni-toasts /> is a web component. All we need to do is put the required script into your HTML document. Then follow <uni-toasts />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://unpkg.com/uni-toasts/mjs/wc-uni-toasts.js"> </script>

Structure

Put <uni-toasts /> into HTML document. It will have different functions and looks with attribute mutation.

<uni-toasts maxcount="3" autodismiss ></uni-toasts>

JavaScript Instantiation

<uni-toasts /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { UniToasts } from 'https://unpkg.com/uni-toasts/mjs/wc-uni-toasts.js'; // use DOM api const nodeA = document.createElement('uni-toasts'); document.body.appendChild(nodeA); nodeA.maxcount = 3; // new instance with Class const nodeB = new UniToasts(); document.body.appendChild(nodeB); nodeB.maxcount = 3; // new instance with Class & default config const config = { maxcount: 3, autodismiss: true }; const nodeC = new UniToasts(config); document.body.appendChild(nodeC); </script>

Style Customization

Developers could apply styles to decorate <uni-toasts />'s looking.

<style> uni-toasts { --uni-toasts-axis-y: 76px; } </style>

Attributes

<uni-toasts /> component exposes a curated set of attributes, enabling developers to dynamically adjust the user interface. This provides the flexibility to tailor the component’s appearance to seamlessly adapt to any given context.

maxcount

The maxcount attribute defines the maximum number of toast notifications allowed to be displayed simultaneously on the screen. When the number of active toasts exceeds this specified limit, the oldest notification will be automatically dismissed to make room for the new one. This attribute enforces a strict validation range, accepting integer values from a minimum of 2 to a maximum of 20. If an invalid value is supplied or omitted, the component defaults to 3.

<uni-toasts maxcount="3" > </uni-toasts>

autodismiss

The autodismiss attribute determines whether toast notifications are automatically cleared after a specific duration. Each notification carries a predefined lifespan based on its content type: standard messages persist for 3 seconds, while notifications containing an action button extend their visibility to 6 seconds to allow for user interaction. Enforcing this attribute activates the automatic cleanup mechanism. By default, this feature is disabled.

<uni-toasts autodismiss > </uni-toasts>

Properties

Property Name Type Description
maxcount Integer Getter / Setter maxcount. maxcount defines the maximum number of toast notifications allowed to be displayed simultaneously on the screen. When the number of active toasts exceeds this specified limit, the oldest notification will be automatically dismissed to make room for the new one. This attribute enforces a strict validation range, accepting integer values from a minimum of 2 to a maximum of 20. If an invalid value is supplied or omitted, the component defaults to 3.
autodismiss Boolean Getter / Setter autodismiss. autodismiss attribute determines whether toast notifications are automatically cleared after a specific duration. Each notification carries a predefined lifespan based on its content type: standard messages persist for 3 seconds, while notifications containing an action button extend their visibility to 6 seconds to allow for user interaction. Enforcing this attribute activates the automatic cleanup mechanism. By default, this value is false.

Mathods

Mathod Signature Description
show(content = '', option = {}) The show method is the primary programmatic interface for dispatching notifications. To trigger a message, simply pass the desired string to the content parameter. Advanced behaviors and styles can be further configured through the optional option object. The option parameter currently supports three properties: stat, action, and params. These properties allow developers to alter the visual state of the toast, render an interactive action button, and define the custom parameters to be passed back to the accompanying callback function.

Here comes the example.

<script type="module"> const uniToasts = document.querySelector('uni-toasts'); uniToasts.show( 'Show me the money', { stat: 'valid', // (String). Typically accepts state tokens such as 'valid' or 'invalid' action: 'action', // (String). The label text for the interactive action button. If omitted, no button will be rendered. params: { url: 'https://tw.bid.yahoo.com' } // (Object). A payload containing custom data properties to be passed back when the action button's event or callback is captured. } ); </script>

Event

Event Signature Description
uni-toasts-action-click This Custom Event is dispatched immediately when the interactive action button within a toast is clicked. Developers can listen to this event and intercept the event.detail property to retrieve the custom payload or parameters initially configured inside the option.params object during the show() method invocation.

Reference