CloseButtonProperty

interface CloseButtonProperty

This interface offers some convenience properties for adding a close button to a component.

If offers the possibilities to:

  • change the styling of the default appearance

  • decide whether there is a close button or not

  • change the whole rendering by a custom implementation

Example integration:

open class MyComponent : Component<Unit>, CloseButtonProperty by CloseButtonMixin(ComponentProperty{})  {
// ^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^
// implement interface delegate to inject empty custom
// mixin styling
override fun render(/* params omitted */) {
div {
// check if closeButton is needed and render it then
if (hasCloseButton.value) {
closeButtonRendering.value(this) handledBy closeHandler
// ^^^^^^^^^^^^^^^^^^^^^^
// use return value (event)
// to handle it by your closing mechanism
}
}
}
}

For some example usages, have a look at the following components:

See also

Functions

equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
toString
Link copied to clipboard
js
open fun toString(): String

Properties

closeButtonIcon
Link copied to clipboard
js
abstract val closeButtonIcon: ComponentProperty<Icons.() -> IconDefinition>
closeButtonPrefix
Link copied to clipboard
js
abstract val closeButtonPrefix: String
closeButtonRendering
Link copied to clipboard
js
abstract val closeButtonRendering: ComponentProperty<RenderContext.() -> DomListener<MouseEvent, HTMLElement>>
closeButtonStyle
Link copied to clipboard
js
abstract val closeButtonStyle: ComponentProperty<Style<BasicParams>>
hasCloseButton
Link copied to clipboard
js
abstract val hasCloseButton: ComponentProperty<Boolean>

Inheritors

CloseButtonMixin
Link copied to clipboard
ModalComponent
Link copied to clipboard
PopoverComponent
Link copied to clipboard
ToastComponent
Link copied to clipboard