Use toasts when users need to know about changes in system state due to background processes.
Use toasts when information is important enough to notify users regardless of their current tasks or context.
Toasts provide lightweight, time-sensitive information that is relevant to users when it appears. They guide users on actions to take and should include links for those actions whenever possible.
The text must be clear and concise, and punctuation is subjective depending on the scenario.
If a toast is the only place users can see a message, display the toast until users manually close it. Only close toasts automatically if users can access the messages after the toasts close.
@skyux/toastView in NPM | View in GitHub None found. npm install --save-exact @skyux/toast None found. closeAll(): voidCloses all active toast components.
void
openComponent(component: Type$1<unknown>, config?: SkyToastConfig, providers = []): SkyToastInstanceOpens a new toast using a custom component.
component: Type$1<unknown>Specifies an Angular component to inject into the toast body,
config?: SkyToastConfigSpecifies additional configuration options for the toast.
providers = []Specifies an array of custom providers to pass to the custom component's constructor.
openMessage(message: string, config?: SkyToastConfig): SkyToastInstanceOpens a new toast and displays the specified message.
message: stringSpecifies the text to display in the toast.
config?: SkyToastConfigSpecifies additional configuration options for the toast.
Specifies the configuration options to set up a toast.
interface SkyToastConfig {
autoClose?: boolean;
type?: SkyToastType;
}autoClose?: booleanWhether to automatically close the toast. Only close toasts automatically if users can access the messages after the toasts close.
type?: SkyToastTypeThe SkyToastType type that determines the color and icon for the toast. This property defaults to Info.
enum SkyToastType {
Danger = 0,
Info = 1,
Success = 2,
Warning = 3,
}SkyToastType.DangerSets the toast's icon and background color to the danger style.
SkyToastType.InfoSets the toast's icon and background color to the info style.
SkyToastType.SuccessSets the toast's icon and background color to the success style.
SkyToastType.WarningSets the toast's icon and background color to the warning style.
closed: Observable<void>An observable that indicates when the toast is closed.
close(): voidCloses the toast component.
void
Global configuration options for displaying toast components.
displayDirection: SkyToastDisplayDirection | undefinedOrder in which toasts should appear in the page's toast container.
enum SkyToastDisplayDirection {
NewestOnTop = 1,
OldestOnTop = 0,
}SkyToastDisplayDirection.NewestOnTopDisplays new toasts on top of previous toasts.
SkyToastDisplayDirection.OldestOnTopDisplays new toasts below previous toasts.
SKY UX test harnesses are built upon Angular CDK component harnesses. For more information see the Angular CDK component harness documentation.
import { SkyToasterHarness } from '@skyux/toast/testing';
Harness for interacting with toasts' host component in tests.
Use this harness to query and interact with SkyToastHarness for open toast components.
getNumberOfToasts(): Promise<number>Promise<number>
getToastByMessage(message: string): Promise<SkyToastHarness>Gets a toast harness that matches the message.
message: stringPromise<SkyToastHarness>
getToasts(): Promise<SkyToastHarness[]>import { SkyToastHarness } from '@skyux/toast/testing';
Harness for interacting with the toast component in tests.
close(): Promise<void>Clicks the toast close button.
Promise<void>
getMessage(): Promise<string>Gets the toast message.
Promise<string>
getType(): Promise<SkyToastType>queryHarness(query: HarnessQuery<T>): Promise<T>Returns a child harness or throws an error if not found.
query: HarnessQuery<T>Promise<T>
queryHarnesses(harness: HarnessQuery<T>): Promise<T[]>Returns child harnesses.
harness: HarnessQuery<T>Promise<T[]>
queryHarnessOrNull(query: HarnessQuery<T>): Promise<null | T>Returns a child harness or null if not found.
query: HarnessQuery<T>Promise<null | T>
querySelector(selector: string): Promise<TestElement>Returns a child test element or throws an error if not found.
selector: stringPromise<TestElement>
querySelectorAll(selector: string): Promise<TestElement[]>Returns child test elements.
selector: stringPromise<TestElement[]>
querySelectorOrNull(selector: string): Promise<null | TestElement>Returns a child test element or null if not found.
selector: stringPromise<null | TestElement>
SkyToastHarness.with(filters: SkyToastHarnessFilters): HarnessPredicate<SkyToastHarness>Gets a HarnessPredicate that can be used to search for a
SkyToastHarness that meets certain criteria.
filters: SkyToastHarnessFiltersHarnessPredicate<SkyToastHarness>
A set of criteria that can be used to filter a list of SkyToastHarness instances.
interface SkyToastHarnessFilters {
message?: string;
}message?: stringFinds toasts with the matching text.
Loading...