AlertComponent

open class AlertComponent : Component<Unit>

A component to display an alert consisting of an icon, title and description. Different styles based on severities are supported, as well as a number of different layout options.

Currently the following severities are available:

  • Info

  • Success

  • Warning

  • Error Specifying a severity will change the alert's color scheme based on the colors defined in the application theme as well as the icon displayed. If no severity is specified, 'info' will be used by default. The alert's icon can manually be set via the 'icon'-property in which case the severity's icon will be ignored.

Additionally, a number of different layout options are available. These are:

  • 'subtle': A subtle style using different shades of the severity's base color defined in the application theme.

  • 'solid': A solid style using the severity's color from the application theme and a solid white color for the icon, text and decorations.

  • 'Top-Accent': A variation of the 'subtle' variant with a decoration element at the top.

  • 'Left-Accent': A variation of the 'subtle' variant with a decoration element on the left. If no variant is specified, 'solid' is used by default.

Usage examples:

alert {
title("Alert")
content("This is an alert.")
severity { info }
}

alert {
title("Alert")
content("This is an alert.")
severity { error }
variant { leftAccent }
}

Constructors

AlertComponent
Link copied to clipboard
js
fun AlertComponent()

Types

Companion
Link copied to clipboard
js
object Companion

Functions

content
Link copied to clipboard
js
fun content(value: RenderContext.() -> Unit)
fun content(value: String)
fun content(value: Flow<String>)
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(context: RenderContext, styling: BoxParams.() -> Unit, baseClass: StyleClass, id: String?, prefix: String)
Central method that should do the actual rendering of a component.
title
Link copied to clipboard
js
fun title(value: RenderContext.() -> Unit)
fun title(value: String)
fun title(value: Flow<String>)
toString
Link copied to clipboard
js
open fun toString(): String

Properties

icon
Link copied to clipboard
js
val icon: ComponentProperty<Icons.() -> IconDefinition?>
severity
Link copied to clipboard
js
val severity: ComponentProperty<AlertSeverities.() -> AlertSeverity>
sizes
Link copied to clipboard
js
val sizes: ComponentProperty<FormSizes.() -> Style<BasicParams>>
stacking
Link copied to clipboard
js
val stacking: ComponentProperty<AlertStacking.() -> Style<BasicParams>>
variant
Link copied to clipboard
js
val variant: ComponentProperty<AlertVariants.() -> AlertVariantStyleFactory>
variantStyles
Link copied to clipboard
js
val variantStyles: AlertVariantStyles