shadow
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, and can be dismissed by the app to resume user interaction with the app.
ion-toast can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the toast.
The isOpen property on ion-toast allows developers to control the presentation state of the toast from their application state. This means when isOpen is set to true the toast will be presented and when isOpen is set to false the toast will be dismissed.
isOpen uses a one-way data binding, meaning it will not automatically be set to false when the toast is dismissed. Developers should listen for the ionToastDidDismiss or didDismiss event and set isOpen to false. The reason for this is it prevents the internals of ion-toast from being tightly coupled with the state of the application. With a one way data binding, the toast only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the toast needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
Toasts are intended to be subtle notifications and should not interrupt the user. As a result, user interaction should not be required to dismiss the toast.
The toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the duration of the toast options. If a button with a role of "cancel" is added, then that button will dismiss the toast. To dismiss the toast after creation, call the dismiss() method on the instance.
Pressing the hardware back button does not dismiss toasts since they are not supposed to interrupt the user.
The following example demonstrates how to use the buttons property to add a button that automatically dismisses the toast when clicked, as well as how to collect the role of the dismiss event.
Console messages will appear here when logged from the example above.
Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are top, bottom and middle. If the position is not specified, the toast will be displayed at the bottom of the viewport.
If a toast is presented alongside navigation elements such as a header, footer, or FAB, the toast may overlap these elements by default. This can be fixed using the positionAnchor property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using position="top" or above it when using position="bottom". When using position="middle", the positionAnchor property is ignored.
Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the layout property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a side value of either start or end, but not both.
An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an Alert instead.
Toasts are intended to be subtle notifications and are not intended to interrupt the user. User interaction should not be required to dismiss the toast. As a result, focus is not automatically moved to a toast when one is presented.
Toasts set aria properties in order to be accessible to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the toast is being used in an app.
ion-toast has role="status" and aria-live="polite" set on the inner .toast-content element. This causes screen readers to only announce the toast message and header. Buttons and icons will not be announced when the toast is presented.
aria-live causes screen readers to announce the content of the toast when it is updated. However, since the attribute is set to 'polite', screen readers should not interrupt the current task.
Since toasts are intended to be subtle notification, aria-live should never be set to "assertive". If developers need to interrupt the user with an important message, we recommend using an alert.
Buttons containing text will be read by a screen reader when they are interacted with. If a button contains only an icon, or a description other than the existing text is desired, a label should be assigned to the button by passing aria-label to the htmlAttributes property on the button.
- Angular
- Javascript
- React
- Vue
const toast = await this.toastController.create({
header: 'Header',
buttons: [
{
icon: 'close',
htmlAttributes: {
'aria-label': 'close',
},
},
],
});
const toast = await this.toastController.create({
header: 'Header',
buttons: [
{
icon: 'close',
htmlAttributes: {
'aria-label': 'close',
},
},
],
});
useIonToast({
header: 'Header',
buttons: [
{
icon: 'close',
htmlAttributes: {
'aria-label': 'close',
},
},
],
});
const toast = await toastController.create({
header: 'Header',
buttons: [
{
icon: 'close',
htmlAttributes: {
'aria-label': 'close',
},
},
],
});
While this is not a complete list, here are some guidelines to follow when using toasts.
-
Do not require user interaction to dismiss toasts. For example, having a "Dismiss" button in the toast is fine, but the toast should also automatically dismiss on its own after a timeout period. If you need user interaction for a notification, consider using an alert instead.
-
For toasts with long messages, consider adjusting the duration property to allow users enough time to read the content of the toast.
interface ToastButton {
text?: string;
icon?: string;
side?: 'start' | 'end';
role?: 'cancel' | string;
cssClass?: string | string[];
htmlAttributes?: { [key: string]: any };
handler?: () => boolean | void | Promise<boolean | void>;
}
interface ToastOptions {
header?: string;
message?: string | IonicSafeString;
cssClass?: string | string[];
duration?: number;
buttons?: (ToastButton | string)[];
position?: 'top' | 'bottom' | 'middle';
translucent?: boolean;
animated?: boolean;
icon?: string;
htmlAttributes?: { [key: string]: any };
color?: Color;
mode?: Mode;
keyboardClose?: boolean;
id?: string;
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
}
| Description | trueの場合、トーストはアニメーションします。 |
| Attribute | animated |
| Type | boolean |
| Default | true |
| Description | トースト用のボタンがずらり。 |
| Attribute | undefined |
| Type | (string ｜ ToastButton)[] ｜ undefined |
| Default | undefined |
| Description | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
| Description | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. |
| Attribute | css-class |
| Type | string ｜ string[] ｜ undefined |
| Default | undefined |
| Description | How many milliseconds to wait before hiding the toast. By default, it will show until dismiss() is called. |
| Attribute | duration |
| Type | number |
| Default | config.getNumber('toastDuration', 0) |
| Description | 乾杯の音頭をとるときに使うアニメーションです。 |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
| Description | トーストに表示されるヘッダー。 |
| Attribute | header |
| Type | string ｜ undefined |
| Default | undefined |
| Description | トーストに渡す追加の属性。 |
| Attribute | undefined |
| Type | undefined ｜ { [key: string]: any; } |
| Default | undefined |
| Description | The name of the icon to display, or the path to a valid SVG file. See ion-icon. https://ionic.io/ionicons |
| Attribute | icon |
| Type | string ｜ undefined |
| Default | undefined |
| Description | If true, the toast will open. If false, the toast will close. Use this if you need finer grained control over presentation, otherwise just use the toastController or the trigger property. Note: isOpen will not automatically be set back to false when the toast dismisses. You will need to do that in your code. |
| Attribute | is-open |
| Type | boolean |
| Default | false |
| Description | trueの場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 |
| Attribute | keyboard-close |
| Type | boolean |
| Default | false |
| Description | Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons. |
| Attribute | layout |
| Type | "baseline" ｜ "stacked" |
| Default | 'baseline' |
| Description | トーストの解散時に使用するアニメーションです。 |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
| Description | Message to be shown in the toast. This property accepts custom HTML as a string. Content is parsed as plaintext by default. innerHTMLTemplatesEnabled must be set to true in the Ionic config before custom HTML can be used. |
| Attribute | message |
| Type | IonicSafeString ｜ string ｜ undefined |
| Default | undefined |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | The starting position of the toast on the screen. Can be tweaked further using the positionAnchor property. |
| Attribute | position |
| Type | "bottom" ｜ "middle" ｜ "top" |
| Default | 'bottom' |
| Description | The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With position="bottom", the toast will sit above the chosen element. With position="top", the toast will sit below the chosen element. With position="middle", the value of positionAnchor is ignored. |
| Attribute | position-anchor |
| Type | HTMLElement ｜ string ｜ undefined |
| Default | undefined |
| Description | If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the position property: top: The Toast can be swiped up to dismiss. bottom: The Toast can be swiped down to dismiss. middle: The Toast can be swiped up or down to dismiss. |
| Attribute | swipe-gesture |
| Type | "vertical" ｜ undefined |
| Default | undefined |
| Description | If true, the toast will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter. |
| Attribute | translucent |
| Type | boolean |
| Default | false |
| Description | An ID corresponding to the trigger element that causes the toast to open when clicked. |
| Attribute | trigger |
| Type | string ｜ undefined |
| Default | undefined |
| Name | Description | Bubbles |
|---|
didDismiss | Emitted after the toast has dismissed. Shorthand for ionToastDidDismiss. | true |
didPresent | Emitted after the toast has presented. Shorthand for ionToastWillDismiss. | true |
ionToastDidDismiss | トーストが解散した後に発行されます。 | true |
ionToastDidPresent | トーストが提示された後に発行されます。 | true |
ionToastWillDismiss | 乾杯が解散する前に発行されます。 | true |
ionToastWillPresent | トーストが提示される前に発行されます。 | true |
willDismiss | Emitted before the toast has dismissed. Shorthand for ionToastWillDismiss. | true |
willPresent | Emitted before the toast has presented. Shorthand for ionToastWillPresent. | true |
| Description | トーストのオーバーレイが提示された後、それを解除します。 |
| Signature | dismiss(data?: any, role?: string) => Promise<boolean> |
| Description | トーストが解散したことを解決するPromiseを返します。 |
| Signature | onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
| Description | トーストが解散するタイミングを解決するPromiseを返します。 |
| Signature | onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
| Description | トーストのオーバーレイを作成した後に提示します。 |
| Signature | present() => Promise<void> |
| Name | Description |
|---|
button | トーストの内側に表示される任意のボタン要素。 |
button cancel | トーストの内側に表示される、"cancel "というロールを持つボタン要素。 |
container | すべての子要素を包む要素。 |
header | 乾杯のヘッダーテキストです。 |
icon | トーストの内容の横に表示されるアイコンです。 |
message | 乾杯の音頭の本文です。 |
| Name | Description |
|---|
--background | 乾杯の背景 |
--border-color | トーストのボーダーカラー |
--border-radius | トーストのボーダー半径 |
--border-style | トーストのボーダースタイル |
--border-width | トーストのボーダー幅 |
--box-shadow | 乾杯の箱影 |
--button-color | ボタンテキストの色 |
--color | トーストの文字色 |
--end | 方向が左から右の場合は右から、方向が右から左の場合は左から位置すること |
--height | トーストの高さ |
--max-height | トーストの最大の高さ |
--max-width | トーストの最大幅 |
--min-height | トーストの最小の高さ |
--min-width | トーストの最小幅 |
--start | 方向が左から右の場合は左から、方向が右から左の場合は右から位置すること |
--white-space | 乾杯メッセージのホワイトスペース |
--width | トーストの幅 |
No slots available for this component.