**The API is experimental, and breaking changes can be expected**
**The API is not finalized, and breaking changes can be expected**
You can add event listeners in the `attrs` block:
You can add event listeners in the `attrs` block:
@ -8,11 +8,11 @@ You can add event listeners in the `attrs` block:
``` kotlin
``` kotlin
Button(
Button(
attrs = {
attrs = {
onClick { wrappedMouseEvent ->
onClick { event ->
// wrappedMouseEvent is of `WrappedMouseEvent` type
// event is of `SyntheticMouseEvent` type
println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}")
println("button clicked at ${event.movementX}, ${event.movementY}")
val nativeEvent = wrappedMouseEvent.nativeEvent // [MouseEvent](https://developer.mozilla.org/en/docs/Web/API/MouseEvent)
val nativeEvent = event.nativeEvent // [MouseEvent](https://developer.mozilla.org/en/docs/Web/API/MouseEvent)
}
}
}
}
) {
) {
@ -37,22 +37,19 @@ TextArea(
#### Other event handlers
#### Other event handlers
For events that don't have their own configuration functions in the `attrs` block, you can use `addEventListener` with the `name` of the event, `options`, and an pass an `eventListener` which receives a `WrappedEvent`. In this example, we're defining the behavior of a `Form` element when it triggers the `submit` event:
For events that don't have their own configuration functions in the `attrs` block, you can use `addEventListener` with the `name` of the event, `options`, and an pass an `eventListener` which receives a `SyntheticEvent`. In this example, we're defining the behavior of a `Form` element when it triggers the `submit` event:
``` kotlin
``` kotlin
Form(attrs = {
Form(attrs = {
this.addEventListener("submit") {
this.addEventListener("submit") {
console.log("Hello, Submit!")
console.log("Hello, Submit!")
it.nativeEvent.preventDefault()
it.preventDefault()
}
}
})
})
```
```
Your event handlers receive wrapped events that inherit from `GenericWrappedEvent`, which also provides access to the underlying `nativeEvent` – the actual event created by JS runtime -
There are more event listeners supported out of a box. We plan to add the documentation for them later on. In the meantime, you can find all supported event listeners in the [source code](https://github.com/JetBrains/compose-jb/blob/master/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerBuilder.kt).
There are more event listeners supported out of a box. We plan to add the documentation for them later on. In the meantime, you can find all supported event listeners in the [source code](https://github.com/JetBrains/androidx/blob/compose-web-main/compose/web/src/jsMain/kotlin/androidx/compose/web/attributes/EventsListenerBuilder.kt).
### Runnable example
### Runnable example
@ -67,11 +64,8 @@ fun main() {
renderComposable(rootElementId = "root") {
renderComposable(rootElementId = "root") {
Button(
Button(
attrs = {
attrs = {
onClick { wrappedMouseEvent ->
onClick { event ->
// wrappedMouseEvent is of `WrappedMouseEvent` type
println("button clicked at ${event.movementX}, ${event.movementY}")
println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}")
**The API is experimental, and breaking changes can be expected**
**The API is not finalized, and breaking changes can be expected**
## Introduction
## Introduction
In this tutorial we have a look at how to style the components using the Style DSL. It’s a typesafe DSL for style sheets, which you can use to express CSS rules in your Kotlin code, and even modify styles based on the state of your Compose application.
In this tutorial we have a look at how to style the components using the Style DSL. It’s a typesafe DSL for style sheets, which you can use to express CSS rules in your Kotlin code, and even modify styles based on the state of your Compose application.
Oleksandr Karpovich
3 years ago
committed by
GitHub