PushButtonComponent

open class PushButtonComponent

This class combines the configuration and the core rendering of a button.

The rendering functions are used by the component factory functions pushButton and clickButton, so they are not meant to be called directly unless you plan to implement your own button. If not, just use those functions for stetting up a button!

Much more important are the configuration functions. You can configure the following aspects:

  • the background color

  • the label text

  • the icon including its position (left or right)

  • a state called `loading` for visualizing a longer background task

  • an additional label during the loading state

  • some predefined styling variants

  • link events of the button like `clicks` with external handlers

This can be done within a functional expression that is the last parameter of the two button functions, called `build`. It offers an initialized instance of this PushButtonComponent class as receiver, so every mutating method can be called for configuring the desired state for rendering the button.

The following example shows the usage:

pushButton { /* this == PushButtonComponent() */
icon { fromTheme { check } } // set up an icon
iconRight() // place the icon on the right side (left ist the default)
loading(someStore.loading) // pass in some [Flow<Boolean>] that shows a spinner if ``true`` is passed
loadingText("saving") // show an _alternate_ label, if store sends ``true``
text("save") // define the default label
events { // open inner context with all DOM-element events
clicks handledBy someStore.update // react to click event
}
}

Constructors

PushButtonComponent
Link copied to clipboard
js
fun PushButtonComponent()

Types

Companion
Link copied to clipboard
js
object Companion

Functions

color
Link copied to clipboard
js
fun color(value: Colors.() -> ColorProperty)
equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
events
Link copied to clipboard
js
fun events(value: WithEvents<HTMLButtonElement>.() -> Unit)
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
icon
Link copied to clipboard
js
fun icon(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass? = null, id: String? = null, prefix: String = IconComponent.prefix, build: IconComponent.() -> Unit = {})
iconRight
Link copied to clipboard
js
fun iconRight()
loading
Link copied to clipboard
js
fun loading(value: Flow<Boolean>)
loadingText
Link copied to clipboard
js
fun loadingText(value: String)
fun loadingText(value: Flow<String>)
renderIcon
Link copied to clipboard
js
fun renderIcon(renderContext: Button, iconStyle: Style<BasicParams>, spinnerStyle: Style<BasicParams>)
renderLabel
Link copied to clipboard
js
fun renderLabel(renderContext: Button)
size
Link copied to clipboard
js
fun size(value: PushButtonSizes.() -> Style<BasicParams>)
text
Link copied to clipboard
js
fun text(value: String)
fun text(value: Flow<String>)
toString
Link copied to clipboard
js
open fun toString(): String
variant
Link copied to clipboard
js
fun variant(value: PushButtonVariants.() -> Style<BasicParams>)

Properties

centerIconStyle
Link copied to clipboard
js
val centerIconStyle: Style<BasicParams>
centerSpinnerStyle
Link copied to clipboard
js
val centerSpinnerStyle: Style<BasicParams>
color
Link copied to clipboard
js
var color: Style<BasicParams>
events
Link copied to clipboard
js
var events: WithEvents<HTMLButtonElement>.() -> Unit? = null
icon
Link copied to clipboard
js
var icon: (RenderContext, Style<BasicParams>) -> Unit? = null
isIconRight
Link copied to clipboard
js
var isIconRight: Boolean = false
label
Link copied to clipboard
js
var label: RenderContext.(hide: Boolean) -> Unit? = null
leftIconStyle
Link copied to clipboard
js
val leftIconStyle: Style<BasicParams>
leftSpinnerStyle
Link copied to clipboard
js
val leftSpinnerStyle: Style<BasicParams>
loading
Link copied to clipboard
js
var loading: Flow<Boolean>? = null
loadingText
Link copied to clipboard
js
var loadingText: RenderContext.() -> Unit? = null
rightIconStyle
Link copied to clipboard
js
val rightIconStyle: Style<BasicParams>
rightSpinnerStyle
Link copied to clipboard
js
val rightSpinnerStyle: Style<BasicParams>
size
Link copied to clipboard
js
var size: PushButtonSizes.() -> Style<BasicParams>
variant
Link copied to clipboard
js
var variant: PushButtonVariants.() -> Style<BasicParams>