ToastComponent

open class ToastComponent : ManagedComponent<Unit> , CloseButtonProperty

This class combines the configuration and the core styling of a toast.

You can configure the following aspects:

  • position of the toast: top | topLeft | topRight | bottom (default) | bottomLeft | bottomRight

  • duration: time in ms before the toast is automatically dismissed - default is 5000 ms

  • isCloseable : if true, a close button is added for closing the toast before the duration timer hits zero

  • closeButtonStyle: style of the toast's close button, if displayed

  • background: background color of the toast

  • content : actual content of the toast, e.g. some text or an icon.

In order to avoid having to build the toast's content manually, it is recommended to use toasts in combination with alerts. This can be done by providing an AlertComponent as the toast's content.

showToast {
content {
alert {
title("Alert-Toast")
content("This is a test-alert in a toast.")
}
}
severity { success }
variant { leftAccent }
}

Example on how to set up a toast manually:

showToast {
status { warning }
position { bottomRight }
duration { 8000 }

content { ... }
}

Also, there are two static helper functions for the following use cases:

Example:

clickButton {
variant { outline }
text("closeAll")
} handledBy ToastComponent.closeAllToasts()

Constructors

ToastComponent
Link copied to clipboard
js
fun ToastComponent()

Types

Companion
Link copied to clipboard
js
object Companion
Placement
Link copied to clipboard
js
object Placement
ToastFragment
Link copied to clipboard
js
data class ToastFragment(id: String, placement: String, render: RenderContext.() -> Li)
ToastStore
Link copied to clipboard
js
object ToastStore : RootStore<List<ToastComponent.ToastFragment>>

Functions

equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
render
Link copied to clipboard
js
open override fun render(styling: BoxParams.() -> Unit, baseClass: StyleClass, id: String?, prefix: String)
This method registers one toast at the central toast store and creates a rendering expression that will be executed by the central rendering in the companion's object ToastComponent.Companion init block.
toString
Link copied to clipboard
js
open fun toString(): String

Properties

background
Link copied to clipboard
js
val background: ComponentProperty<Colors.() -> ColorProperty>
closeButtonIcon
Link copied to clipboard
js
open override val closeButtonIcon: ComponentProperty<Icons.() -> IconDefinition>
closeButtonPrefix
Link copied to clipboard
js
open override val closeButtonPrefix: String
closeButtonRendering
Link copied to clipboard
js
open override val closeButtonRendering: ComponentProperty<RenderContext.() -> DomListener<MouseEvent, HTMLElement>>
closeButtonStyle
Link copied to clipboard
js
open override val closeButtonStyle: ComponentProperty<Style<BasicParams>>
content
Link copied to clipboard
js
val content: ComponentProperty<RenderContext.() -> Unit?>
duration
Link copied to clipboard
js
val duration: ComponentProperty<Long>
hasCloseButton
Link copied to clipboard
js
open override val hasCloseButton: ComponentProperty<Boolean>
placement
Link copied to clipboard
js
val placement: ComponentProperty<ToastComponent.Placement.() -> String>