-
Notifications
You must be signed in to change notification settings - Fork 160
Toast Specification
Version | User | Date | Notes |
---|---|---|---|
0.1 | Zdravko Kolev | June 24, 2020 | Update spec based on new show message parameter |
igx-toast
is a circular-shaped component, usually used to indicate that there is an update on status of the item related to (such as avatar, navigation menu, list item or anywhere else in an app where some active indication is required).
<igx-toast message="Something happened">
</igx-toast>
Equip citizen developers with a toast component that is primarily used for system messaging at the bottom of the screen. It will not contain actions and cannot be swiped off screen.
As a citizen developer, I want to be able to call a toast component programmatically so I can notify the application users with system critical messages that they could not swipe off the screen.
As an end user, I want to see a toast message on top of my application that gives me critical information that I must be aware of.
Toast (system messaging):
- Аppears at bottom, middle or top of the screen
- Contains text only (NO icons or buttons)
- Мay NOT be swiped off - they disappear automatically
A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content.
Toasts can be positioned at the top, bottom, or middle of the viewport and are dismissed automatically after a specific amount of time.
<button (click)="toast.show()">Show toast</button>
<igx-toast #toast
message="This is very important!">
</igx-toast>
You can show the Toast by using toast.show()
method, and change the message by passing a string value to the method e.g show("My custom message")
or by using content projection. You can place your message or any HTML element in the toast content which gives you a more powerful and diverse way of toast content handling.
You can use content projection for displaying various content into the toast component. It also allows users to access toast styles through its host element.
Toast content and message precedence. If all of the below is set simultaneously, this is the priority that will be respected:
- Content projection
show("custom message")
<igx-toast #toast message="My custom message"></igx-toast>
Note: show("custom message") will override the message
input.
A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive.
The end user interface consists only of a text message.
The toast is a non-interactive component.
Properties
-
autoHide
- Sets if the IgxToast component will be hidden after shown. Default value is true. -
displayTime
- The duration of time span in ms which the IgxToast component will be visible after it is being shown. Default value is 4000. -
isVisible
- The IgxToast component visual state state. Default value is false. -
message
- The message that will be shown message by the IgxToast component. -
actionText
- The text of the IgxToast component action - Methods
-
show()
- Shows the IgxToast component and hides it after some time span if autoHide is enabled. -
hide()
- Hides the IgxToast component. - Events
-
onAction
- The event that will be thrown when the action is executed, provides a reference to the IgxToast component as argument.
-
Roles
: - role="alert". https://www.w3.org/TR/wai-aria-practices/examples/alert/index.html