mirror of
https://github.com/jlengrand/compose-multiplatform.git
synced 2026-03-10 08:11:20 +00:00
Update web tutorials for 0.5.0-build228 (#833)
Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
This commit is contained in:
committed by
GitHub
parent
599ffdce58
commit
e40f7a0d9a
@@ -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 {
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user