From bfc5a91d2a84bc96de42bb8860a858948ac6982d Mon Sep 17 00:00:00 2001 From: Oleksandr Karpovich Date: Tue, 1 Jun 2021 22:28:38 +0200 Subject: [PATCH] Update web tutorials and template to conform the latest API changes --- templates/web-template/build.gradle.kts | 4 ++-- tutorials/Web/Building_UI/README.md | 30 ++++++++++++------------- tutorials/Web/Events_Handling/README.md | 6 ++--- tutorials/Web/Getting_Started/README.md | 12 +++++----- tutorials/Web/Style_Dsl/README.md | 21 +++++++++-------- 5 files changed, 35 insertions(+), 38 deletions(-) diff --git a/templates/web-template/build.gradle.kts b/templates/web-template/build.gradle.kts index 95d87d9bb3..0c77d19ec8 100644 --- a/templates/web-template/build.gradle.kts +++ b/templates/web-template/build.gradle.kts @@ -3,9 +3,9 @@ import org.jetbrains.compose.desktop.application.dsl.TargetFormat plugins { // __KOTLIN_COMPOSE_VERSION__ - kotlin("multiplatform") version "1.5.0" + kotlin("multiplatform") version "1.5.10" // __LATEST_COMPOSE_RELEASE_VERSION__ - id("org.jetbrains.compose") version ("0.0.0-web-dev-13") + id("org.jetbrains.compose") version ("0.0.0-web-dev-14") } repositories { diff --git a/tutorials/Web/Building_UI/README.md b/tutorials/Web/Building_UI/README.md index 255c59da75..f0e614e30b 100644 --- a/tutorials/Web/Building_UI/README.md +++ b/tutorials/Web/Building_UI/README.md @@ -175,19 +175,20 @@ You can find a more detailed overview of the style DSL, as well as additional ex ### Runnable example ```kotlin -import androidx.compose.web.elements.* -import androidx.compose.web.attributes.* -import androidx.compose.web.css.* -import androidx.compose.web.renderComposable +import androidx.compose.runtime.Composable +import org.jetbrains.compose.web.attributes.* +import org.jetbrains.compose.web.css.* +import org.jetbrains.compose.web.dom.* +import org.jetbrains.compose.web.renderComposable fun main() { renderComposable(rootElementId = "root") { Div( attrs = { // specify attributes here - }, - style = { - // specify inline style here + style { + // specify inline style here + } } ) { Text("A text in
") @@ -196,17 +197,16 @@ fun main() { Input( type = InputType.Text, // All InputTypes supported value = "", // sets the input value - attrs = {}, - style = {} + attrs = {} ) Input(attrs = { type(InputType.Text) }) Text("Arbitrary text") - Span( - style = { color("red") } // inline style - ) { + Span({ + style { color("red") } // inline style + }) { Text("Red text") } @@ -241,15 +241,15 @@ fun main() { } ) { Text("Button") } - Div( - style = { + Div({ + style { display(DisplayStyle.Flex) padding(20.px) // custom property property("font-family", value("Arial, Helvetica, sans-serif")) } - ) { Text("Text in Div with inline style") } + }) { Text("Text in Div with inline style") } } } ``` \ No newline at end of file diff --git a/tutorials/Web/Events_Handling/README.md b/tutorials/Web/Events_Handling/README.md index 5412409360..670dee2e73 100644 --- a/tutorials/Web/Events_Handling/README.md +++ b/tutorials/Web/Events_Handling/README.md @@ -60,9 +60,9 @@ There are more event listeners supported out of a box. We plan to add the docume ```kotlin import androidx.compose.runtime.* -import androidx.compose.web.elements.* -import androidx.compose.web.attributes.* -import androidx.compose.web.renderComposable +import org.jetbrains.compose.web.css.* +import org.jetbrains.compose.web.dom.* +import org.jetbrains.compose.web.renderComposable fun main() { renderComposable(rootElementId = "root") { diff --git a/tutorials/Web/Getting_Started/README.md b/tutorials/Web/Getting_Started/README.md index 8226a7f56f..b89d084ab6 100644 --- a/tutorials/Web/Getting_Started/README.md +++ b/tutorials/Web/Getting_Started/README.md @@ -93,13 +93,11 @@ kotlin { import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.getValue import androidx.compose.runtime.setValue -import androidx.compose.web.css.padding -import androidx.compose.web.css.px -import androidx.compose.web.elements.Button -import androidx.compose.web.elements.Div -import androidx.compose.web.elements.Span -import androidx.compose.web.elements.Text -import androidx.compose.web.renderComposable +import androidx.compose.runtime.Composable +import org.jetbrains.compose.web.attributes.* +import org.jetbrains.compose.web.css.* +import org.jetbrains.compose.web.dom.* +import org.jetbrains.compose.web.renderComposable fun main() { var count: Int by mutableStateOf(0) diff --git a/tutorials/Web/Style_Dsl/README.md b/tutorials/Web/Style_Dsl/README.md index 2b971b797c..d6366f572c 100644 --- a/tutorials/Web/Style_Dsl/README.md +++ b/tutorials/Web/Style_Dsl/README.md @@ -10,15 +10,15 @@ In this tutorial we have a look at how to style the components using the Style D You can declare inline styles via the `style` block of a component ``` kotlin -Div( - style = { +Div({ + style { display(DisplayStyle.Flex) padding(20.px) // custom property (or not supported out of a box) property("font-family", value("Arial, Helvetica, sans-serif")) } -) { /* content goes here */ } +}) { /* content goes here */ } ``` In HTML, it will look like this: @@ -164,11 +164,10 @@ object MyStyleSheet: StyleSheet() { ### Runnable example ```kotlin -import androidx.compose.runtime.* -import androidx.compose.web.elements.* -import androidx.compose.web.attributes.* -import androidx.compose.web.css.* -import androidx.compose.web.renderComposable +import androidx.compose.runtime.Composable +import org.jetbrains.compose.web.css.* +import org.jetbrains.compose.web.dom.* +import org.jetbrains.compose.web.renderComposable object AppStylesheet : StyleSheet() { val container by style { // container is a class @@ -191,15 +190,15 @@ fun Container(content: @Composable () -> Unit) { fun main() { renderComposable(rootElementId = "root") { - Div( - style = { + Div({ + style { display(DisplayStyle.Flex) padding(20.px) // custom property (or not supported out of a box) property("font-family", value("Arial, Helvetica, sans-serif")) } - ) { /* content goes here */ } + }) { /* content goes here */ } Style(AppStylesheet)