Browse Source

Update web tutorials for 0.5.0-build228 (#833)

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
pull/835/head v0.5.0-build228-web
Oleksandr Karpovich 3 years ago committed by GitHub
parent
commit
e40f7a0d9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      templates/web-template/build.gradle.kts
  2. 17
      tutorials/Web/Building_UI/README.md
  3. 10
      tutorials/Web/Events_Handling/README.md
  4. 2
      tutorials/Web/Getting_Started/README.md
  5. 2
      web/gradle.properties

2
templates/web-template/build.gradle.kts

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

17
tutorials/Web/Building_UI/README.md

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

10
tutorials/Web/Events_Handling/README.md

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

2
tutorials/Web/Getting_Started/README.md

@ -43,7 +43,7 @@ pluginManagement {
// Add compose gradle plugin // Add compose gradle plugin
plugins { plugins {
kotlin("multiplatform") version "1.5.10" 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 // Add maven repositories

2
web/gradle.properties

@ -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_VERSION=0.0.16-SNAPSHOT
COMPOSE_WEB_BUILD_WITH_EXAMPLES=false COMPOSE_WEB_BUILD_WITH_EXAMPLES=false

Loading…
Cancel
Save