menu
0.11.5
Toast Stack
A toast container that animates in and stacks toast elements.
Module
import '@capitec/omni-components/toast';
content_copy 
import { OmniToastStack } from "@capitec/omni-components-react/toast";
content_copy
Source
Packages
Interactive
Slotted Toasts
Show From Script
Create From Script
Position
Reverse
Interactive Slotted Toasts Show From Script Create From Script Position Reverse

Properties

Name Attribute Type Description
position position  
| 'top'
        | 'bottom'
        | 'left'
        | 'right'
        | 'top-left'
        | 'top-right'
        | 'bottom-left'
        | 'bottom-right'
 The position to stack toasts
reverse reverse  
boolean | undefined
 Reverse the order of toast with newest toasts showed on top of the stack. By default newest toasts are showed at the bottom of the stack.
dir dir  
string
 Used to set the base direction of text for display
lang lang  
string
 Used to identify the language of text content on the web

Instance Functions

Name Parameters Returns Description
showToast 
init - ShowToastInit
 
Toast
 Push a toast message onto the toast stack.
showInstance 
instance - Toast,
options - ShowToastOptions
 
Toast
 Push an existing toast instance onto the toast stack.

Static Functions

Name Parameters Returns Description
create 
init - ToastStackInit
 
ToastStack | undefined
 Creates a new <omni-toast-stack> element with the provided context and appends it to the DOM (either to document body or to provided target parent element).

Supported Global Attributes

Attribute Type Description 
 data-toast-duration
 
number
 Duration milliseconds that a slotted toast must be shown in the stack before it is removed.

Events

Name Type Description
toast-remove 
CustomEvent<Toast>
 Dispatched when the a toast is removed from the stack.
toast-stack-remove 
CustomEvent<ToastStack>
 Dispatched from a toast when it is removed from the stack.

Types

Name Type
ToastStackInit 
{
    /**
     * The id to apply to the ToastStack element.
     */
    id?: string;

    /**
     * The container to append the ToastStack as child. If not provided will append to a new div element on the document body.
     */
    parent?: string | HTMLElement | DocumentFragment | null;

    /**
     * The position to stack toasts
     */
    position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    /**
     * Reverse the order of toast with newest toasts showed on top of the stack. By default newest toasts are showed at the bottom of the stack.
     */
    reverse?: boolean;
}
ShowToastInit 
{
    /**
     * The type of toast to display.
     */
    type: 'success' | 'warning' | 'error' | 'info' | 'none';

    /**
     * The toast title.
     */
    header?: string;

    /**
     * The toast description.
     */
    detail?: string;

    /**
     * If true, will display a close button that fires a `close-click` event when clicked and removes the toast from the stack.
     */
    closeable?: boolean;

    /**
     * If provided will be the time in millisecond the toast is displayed before being automatically removed from the stack.
     */
    duration?: number;

    /**
     * Content to render before toast message area.
     */
    prefix?: RenderFunction | RenderResult;

    /**
     * Content to render inside the component message area.
     */
    content?: RenderFunction | RenderResult;

    /**
     * Content to render as the close button when `closeable`.
     */
    close?: RenderFunction | RenderResult;
}
ShowToastOptions 
{
    /**
     * If provided will be the time in milliseconds the toast is displayed before being automatically removed from the stack.
     */
    duration?: number;

    /**
     * If true, will display a close button that fires a `close-click` event when clicked and removes the toast from the stack.
     */
    closeable?: boolean;
}

Slots

Name Description 
loading_indicator
 Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called 
[Default Slot]
 Toast(s) to be displayed

Theme Variables

Name Description 
--omni-theme-primary-color
 Theme primary color. 
--omni-theme-primary-hover-color
 Theme primary hover color. 
--omni-theme-primary-active-color
 Theme primary active color. 
--omni-theme-accent-color
 Theme accent color. 
--omni-theme-accent-hover-color
 Theme accent hover color. 
--omni-theme-accent-active-color
 Theme accent active color. 
--omni-theme-background-color
 Theme background color. 
--omni-theme-background-hover-color
 Theme background hover color. 
--omni-theme-background-active-color
 Theme background active color. 
--omni-theme-font-color
 Theme font color. 
--omni-theme-disabled-border-color
 Theme disabled border color. 
--omni-theme-disabled-background-color
 Theme disabled background color. 
--omni-theme-error-font-color
 Theme disabled background color. 
--omni-theme-error-border-color
 Theme error border color. 
--omni-theme-hint-font-color
 Theme hint font color. 
--omni-theme-inactive-color
 Theme inactive color. 
--omni-theme-box-shadow-color
 Theme inactive color. 
--omni-theme-font-family
 Theme font family. 
--omni-theme-font-size
 Theme font size. 
--omni-theme-font-weight
 Theme font weight. 
--omni-theme-border-radius
 Theme border radius. 
--omni-theme-border-width
 Theme border width. 
--omni-theme-box-shadow
 Theme box shadow.

Component Variables

Name Description 
--omni-toast-stack-z-index
 The z-index of the stack. 
--omni-toast-stack-font-color
 The font color applied to the stack. 
--omni-toast-stack-anchor-bottom
 The position from the bottom toast position is set to bottom, bottom-left, or bottom-right. 
--omni-toast-stack-anchor-top
 The position from the bottom toast position is set to top, top-left, or top-right. 
--omni-toast-stack-anchor-left
 The position from the bottom toast position is set to left, top-left, or bottom-left. 
--omni-toast-stack-anchor-right
 The position from the bottom toast position is set to right, top-right, or bottom-right. 
--omni-toast-stack-gap
 The vertical gap between toast elements in the stack.