Skip to main content

Toast TODO

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é.

Základné použitie

Atribúty a Vlastnosti

animated

DescriptionIf true, the toast will animate.
Attributeanimated
Typeboolean
Defaulttrue

buttons

DescriptionAn array of buttons for the toast.
Attributeundefined
Type(string | ToastButton)[] | undefined
Defaultundefined

color

DescriptionThe 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.
Attributecolor
Type"danger." | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
Defaultundefined

cssClass

DescriptionAdditional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attributecss-class
Typestring | string[] | undefined
Defaultundefined

duration

DescriptionHow many milliseconds to wait before hiding the toast. By default, it will show until dismiss() is called.
Attributeduration
Typenumber
Defaultconfig.getNumber('toastDuration', 0)

enterAnimation

DescriptionAnimation to use when the toast is presented.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined
DescriptionHeader to be shown in the toast.
Attributeheader
Typestring | undefined
Defaultundefined

htmlAttributes

DescriptionAdditional attributes to pass to the toast.
Attributeundefined
Typeundefined | { [key: string]: any; }
Defaultundefined

icon

DescriptionThe name of the icon to display, or the path to a valid SVG file. See ion-icon. https://ionic.io/ionicons
Attributeicon
Typestring | undefined
Defaultundefined

isOpen

DescriptionIf 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.
Attributeis-open
Typeboolean
Defaultfalse

keyboardClose

DescriptionIf true, the keyboard will be automatically dismissed when the overlay is presented.
Attributekeyboard-close
Typeboolean
Defaultfalse

layout

DescriptionDefines 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.
Attributelayout
Type"baseline" | "stacked"
Default'baseline'

LeaveAnimation

DescriptionAnimation to use when the toast is dismissed.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

message

DescriptionMessage 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.
Attributemessage
TypeIonicSafeString | string | undefined
Defaultundefined

fashion

DescriptionThe mode determines which platform styles to use.
Attributefashion
Type"ios" | "md"
Defaultundefined

Position

DescriptionThe starting position of the toast on the screen. Can be tweaked further using the positionAnchor property.
AttributePosition
Type"bottom" | "middle" | "top"
Default'bottom'

positionAnchor

DescriptionThe 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.
Attributeposition-anchor
TypeHTMLElement | string | undefined
Defaultundefined

swipeGesture

DescriptionIf 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.
Attributeswipe-gesture
Type"vertical" | undefined
Defaultundefined

translucent

DescriptionIf true, the toast will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
Attributetranslucent
Typeboolean
Defaultfalse

trigger

DescriptionAn ID corresponding to the trigger element that causes the toast to open when clicked.
Attributetrigger
Typestring | undefined
Defaultundefined

Eventy

NameDescription
didDismissEmitted after the toast has dismissed. Shorthand for ionToastDidDismiss.
didPresentEmitted after the toast has presented. Shorthand for ionToastWillDismiss.
ionToastDidDismissEmitted after the toast has dismissed.
ionToastDidPresentEmitted after the toast has presented.
ionToastWillDismissEmitted before the toast has dismissed.
ionToastWillPresentEmitted before the toast has presented.
willDismissEmitted before the toast has dismissed. Shorthand for ionToastWillDismiss.
willPresentEmitted before the toast has presented. Shorthand for ionToastWillPresent.

Metódy

dismiss

DescriptionDismiss the toast overlay after it has been presented.
Signaturedismiss(data?: any, role?: string) => Promise<boolean>

onDidDismiss

DescriptionReturns a promise that resolves when the toast did dismiss.
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

DescriptionReturns a promise that resolves when the toast will dismiss.
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

DescriptionPresent the toast overlay after it has been created.
Signaturepresent() => Promise<void>

CSS Shadow Parts

NameDescription
buttonAny button element that is displayed inside of the toast.
cancel buttonAny button element with role "cancel" that is displayed inside of the toast.
containerThe element that wraps all child elements.
headerThe header text of the toast.
iconThe icon that appears next to the toast content.
messageThe body text of the toast.

CSS Custom Vlastnosti

NameDescription
--backgroundBackground of the toast
--border-colorBorder color of the toast
--border-radiusBorder radius of the toast
--border-styleBorder style of the toast
--border-widthBorder width of the toast
--box-shadowBox shadow of the toast
--button-colorColor of the button text
--colorColor of the toast text
--endPosition from the right if direction is left-to-right, and from the left if direction is right-to-left
--heightHeight of the toast
--max-heightMaximum height of the toast
--max-widthMaximum width of the toast
--min-heightMinimum height of the toast
--min-widthMinimum width of the toast
--startPosition from the left if direction is left-to-right, and from the right if direction is right-to-left
--white-spaceWhite space of the toast message
--widthWidth of the toast

Sloty

No slots available for this component.