Update web tutorials for 0.5.0-build228 (#833)

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
This commit is contained in:
Oleksandr Karpovich
2021-06-29 16:49:17 +02:00
committed by GitHub
parent 599ffdce58
commit e40f7a0d9a
5 changed files with 20 additions and 25 deletions

View File

@@ -5,7 +5,7 @@ plugins {
// __KOTLIN_COMPOSE_VERSION__
kotlin("multiplatform") version "1.5.10"
// __LATEST_COMPOSE_RELEASE_VERSION__
id("org.jetbrains.compose") version ("0.5.0-build226")
id("org.jetbrains.compose") version ("0.5.0-build228")
}
repositories {

View File

@@ -26,9 +26,9 @@ Let's have a look at the Composable for a `Div` tag (most other tags have the sa
Div(
attrs = {
// specify attributes here
},
style = {
// specify inline style here
style {
// specify inline style here
}
}
) {
// div content goes here
@@ -40,9 +40,7 @@ For convenience, some tags like `Input`, `A`, `Form`, or `Img` allow you to spec
``` kotlin
Input(
type = InputType.Text, // All InputTypes supported
value = "", // sets the input value
attrs = {},
style = {}
attrs = {}
)
```
@@ -64,7 +62,7 @@ If you want to apply styles to text, it needs to be wrapped in a container with
``` kotlin
Span(
style = { color("red") } // inline style
attrs = { style { color("red") } } // inline style
) {
Text("Red text")
}
@@ -160,12 +158,14 @@ You can declare inline styles via the `style` block of a component:
``` kotlin
Div(
style = {
display(DisplayStyle.Flex)
padding(20.px)
// custom property
property("font-family", "Arial, Helvetica, sans-serif")
attrs = {
style {
display(DisplayStyle.Flex)
padding(20.px)
// custom property
property("font-family", "Arial, Helvetica, sans-serif")
}
}
) { /* content goes here */ }
```
@@ -196,12 +196,9 @@ fun main() {
Input(
type = InputType.Text, // All InputTypes supported
value = "", // sets the input value
attrs = {}
)
Input(attrs = { type(InputType.Text) })
Text("Arbitrary text")
Span({

View File

@@ -27,9 +27,8 @@ val text = remember { mutableStateOf("") }
TextArea(
value = text.value,
attrs = {
onTextInput { wrappedTextInputEvent ->
// wrappedTextInputEvent is of `WrappedTextInputEvent` type
text.value = wrappedTextInputEvent.inputValue
onInput {
text.value = it.value
}
}
)
@@ -84,9 +83,8 @@ fun main() {
TextArea(
value = text.value,
attrs = {
onTextInput { wrappedTextInputEvent ->
// wrappedTextInputEvent is of `WrappedTextInputEvent` type
text.value = wrappedTextInputEvent.inputValue
onInput {
text.value = it.value
}
}
)

View File

@@ -43,7 +43,7 @@ pluginManagement {
// Add compose gradle plugin
plugins {
kotlin("multiplatform") version "1.5.10"
id("org.jetbrains.compose") version "0.5.0-build226"
id("org.jetbrains.compose") version "0.5.0-build228"
}
// Add maven repositories

View File

@@ -1,3 +1,3 @@
COMPOSE_CORE_VERSION=0.5.0-build227
COMPOSE_CORE_VERSION=0.5.0-build228
COMPOSE_WEB_VERSION=0.0.16-SNAPSHOT
COMPOSE_WEB_BUILD_WITH_EXAMPLES=false