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

ModalComponent
PopoverComponent
ToastComponent

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

PopoverComponent
Link copied to clipboard
AppFrameComponent
Link copied to clipboard
CloseButtonMixin
Link copied to clipboard
ModalComponent
Link copied to clipboard
ToastComponentBase
Link copied to clipboard