shadow
Komponent Toast poskytuje nenápadný spôsob zobrazovania krátkych oznámení používateľovi. Sú navrhnuté tak, aby sa objavovali a mizli plynulo, čím sa zabezpečí, že sa dôležité informácie dostanú k používateľom bez toho, aby boli rušivé.
| Description | If true, the toast will animate. |
| Attribute | animated |
| Type | boolean |
| Default | true |
| Description | An array of buttons for the toast. |
| 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 | Animation to use when the toast is presented. |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
| Description | Header to be shown in the toast. |
| Attribute | header |
| Type | string ｜ undefined |
| Default | undefined |
| Description | Additional attributes to pass to the toast. |
| 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 | If true, the keyboard will be automatically dismissed when the overlay is presented. |
| 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 | Animation to use when the toast is dismissed. |
| 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 | The mode determines which platform styles to use. |
| 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 |
|---|
didDismiss | Emitted after the toast has dismissed. Shorthand for ionToastDidDismiss. |
didPresent | Emitted after the toast has presented. Shorthand for ionToastWillDismiss. |
ionToastDidDismiss | Emitted after the toast has dismissed. |
ionToastDidPresent | Emitted after the toast has presented. |
ionToastWillDismiss | Emitted before the toast has dismissed. |
ionToastWillPresent | Emitted before the toast has presented. |
willDismiss | Emitted before the toast has dismissed. Shorthand for ionToastWillDismiss. |
willPresent | Emitted before the toast has presented. Shorthand for ionToastWillPresent. |
| Description | Dismiss the toast overlay after it has been presented. |
| Signature | dismiss(data?: any, role?: string) => Promise<boolean> |
| Description | Returns a promise that resolves when the toast did dismiss. |
| Signature | onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
| Description | Returns a promise that resolves when the toast will dismiss. |
| Signature | onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
| Description | Present the toast overlay after it has been created. |
| Signature | present() => Promise<void> |
| Name | Description |
|---|
button | Any button element that is displayed inside of the toast. |
button cancel | Any button element with role "cancel" that is displayed inside of the toast. |
container | The element that wraps all child elements. |
header | The header text of the toast. |
icon | The icon that appears next to the toast content. |
message | The body text of the toast. |
| Name | Description |
|---|
--background | Background of the toast |
--border-color | Border color of the toast |
--border-radius | Border radius of the toast |
--border-style | Border style of the toast |
--border-width | Border width of the toast |
--box-shadow | Box shadow of the toast |
--button-color | Color of the button text |
--color | Color of the toast text |
--end | Position from the right if direction is left-to-right, and from the left if direction is right-to-left |
--height | Height of the toast |
--max-height | Maximum height of the toast |
--max-width | Maximum width of the toast |
--min-height | Minimum height of the toast |
--min-width | Minimum width of the toast |
--start | Position from the left if direction is left-to-right, and from the right if direction is right-to-left |
--white-space | White space of the toast message |
--width | Width of the toast |
No slots available for this component.