diff --git a/templates/web-template/build.gradle.kts b/templates/web-template/build.gradle.kts new file mode 100644 index 0000000000..95d87d9bb3 --- /dev/null +++ b/templates/web-template/build.gradle.kts @@ -0,0 +1,32 @@ +import org.jetbrains.compose.compose +import org.jetbrains.compose.desktop.application.dsl.TargetFormat + +plugins { + // __KOTLIN_COMPOSE_VERSION__ + kotlin("multiplatform") version "1.5.0" + // __LATEST_COMPOSE_RELEASE_VERSION__ + id("org.jetbrains.compose") version ("0.0.0-web-dev-13") +} + +repositories { + mavenCentral() + maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") +} + +kotlin { + js(IR) { + browser() + binaries.executable() + } + sourceSets { + val jsMain by getting { + kotlin.srcDir("src/main/kotlin") + resources.srcDir("src/main/resources") + + dependencies { + implementation(compose.web.core) + implementation(compose.runtime) + } + } + } +} \ No newline at end of file diff --git a/templates/web-template/gradle.properties b/templates/web-template/gradle.properties new file mode 100644 index 0000000000..f1a9d3306a --- /dev/null +++ b/templates/web-template/gradle.properties @@ -0,0 +1,2 @@ +org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8 +kotlin.code.style=official \ No newline at end of file diff --git a/templates/web-template/gradle/wrapper/gradle-wrapper.jar b/templates/web-template/gradle/wrapper/gradle-wrapper.jar new file mode 100644 index 0000000000..62d4c05355 Binary files /dev/null and b/templates/web-template/gradle/wrapper/gradle-wrapper.jar differ diff --git a/templates/web-template/gradle/wrapper/gradle-wrapper.properties b/templates/web-template/gradle/wrapper/gradle-wrapper.properties new file mode 100644 index 0000000000..7665b0fa93 --- /dev/null +++ b/templates/web-template/gradle/wrapper/gradle-wrapper.properties @@ -0,0 +1,5 @@ +distributionBase=GRADLE_USER_HOME +distributionPath=wrapper/dists +distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip +zipStoreBase=GRADLE_USER_HOME +zipStorePath=wrapper/dists diff --git a/templates/web-template/gradlew b/templates/web-template/gradlew new file mode 100755 index 0000000000..2fe81a7d95 --- /dev/null +++ b/templates/web-template/gradlew @@ -0,0 +1,183 @@ +#!/usr/bin/env sh + +# +# Copyright 2015 the original author or authors. +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# https://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +# + +############################################################################## +## +## Gradle start up script for UN*X +## +############################################################################## + +# Attempt to set APP_HOME +# Resolve links: $0 may be a link +PRG="$0" +# Need this for relative symlinks. +while [ -h "$PRG" ] ; do + ls=`ls -ld "$PRG"` + link=`expr "$ls" : '.*-> \(.*\)$'` + if expr "$link" : '/.*' > /dev/null; then + PRG="$link" + else + PRG=`dirname "$PRG"`"/$link" + fi +done +SAVED="`pwd`" +cd "`dirname \"$PRG\"`/" >/dev/null +APP_HOME="`pwd -P`" +cd "$SAVED" >/dev/null + +APP_NAME="Gradle" +APP_BASE_NAME=`basename "$0"` + +# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. +DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' + +# Use the maximum available, or set MAX_FD != -1 to use that value. +MAX_FD="maximum" + +warn () { + echo "$*" +} + +die () { + echo + echo "$*" + echo + exit 1 +} + +# OS specific support (must be 'true' or 'false'). +cygwin=false +msys=false +darwin=false +nonstop=false +case "`uname`" in + CYGWIN* ) + cygwin=true + ;; + Darwin* ) + darwin=true + ;; + MINGW* ) + msys=true + ;; + NONSTOP* ) + nonstop=true + ;; +esac + +CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar + +# Determine the Java command to use to start the JVM. +if [ -n "$JAVA_HOME" ] ; then + if [ -x "$JAVA_HOME/jre/sh/java" ] ; then + # IBM's JDK on AIX uses strange locations for the executables + JAVACMD="$JAVA_HOME/jre/sh/java" + else + JAVACMD="$JAVA_HOME/bin/java" + fi + if [ ! -x "$JAVACMD" ] ; then + die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME + +Please set the JAVA_HOME variable in your environment to match the +location of your Java installation." + fi +else + JAVACMD="java" + which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. + +Please set the JAVA_HOME variable in your environment to match the +location of your Java installation." +fi + +# Increase the maximum file descriptors if we can. +if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then + MAX_FD_LIMIT=`ulimit -H -n` + if [ $? -eq 0 ] ; then + if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then + MAX_FD="$MAX_FD_LIMIT" + fi + ulimit -n $MAX_FD + if [ $? -ne 0 ] ; then + warn "Could not set maximum file descriptor limit: $MAX_FD" + fi + else + warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" + fi +fi + +# For Darwin, add options to specify how the application appears in the dock +if $darwin; then + GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" +fi + +# For Cygwin or MSYS, switch paths to Windows format before running java +if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then + APP_HOME=`cygpath --path --mixed "$APP_HOME"` + CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` + JAVACMD=`cygpath --unix "$JAVACMD"` + + # We build the pattern for arguments to be converted via cygpath + ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` + SEP="" + for dir in $ROOTDIRSRAW ; do + ROOTDIRS="$ROOTDIRS$SEP$dir" + SEP="|" + done + OURCYGPATTERN="(^($ROOTDIRS))" + # Add a user-defined pattern to the cygpath arguments + if [ "$GRADLE_CYGPATTERN" != "" ] ; then + OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" + fi + # Now convert the arguments - kludge to limit ourselves to /bin/sh + i=0 + for arg in "$@" ; do + CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` + CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option + + if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition + eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` + else + eval `echo args$i`="\"$arg\"" + fi + i=`expr $i + 1` + done + case $i in + 0) set -- ;; + 1) set -- "$args0" ;; + 2) set -- "$args0" "$args1" ;; + 3) set -- "$args0" "$args1" "$args2" ;; + 4) set -- "$args0" "$args1" "$args2" "$args3" ;; + 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; + 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; + 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; + 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; + 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; + esac +fi + +# Escape application args +save () { + for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done + echo " " +} +APP_ARGS=`save "$@"` + +# Collect all arguments for the java command, following the shell quoting and substitution rules +eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" + +exec "$JAVACMD" "$@" diff --git a/templates/web-template/gradlew.bat b/templates/web-template/gradlew.bat new file mode 100644 index 0000000000..9618d8d960 --- /dev/null +++ b/templates/web-template/gradlew.bat @@ -0,0 +1,100 @@ +@rem +@rem Copyright 2015 the original author or authors. +@rem +@rem Licensed under the Apache License, Version 2.0 (the "License"); +@rem you may not use this file except in compliance with the License. +@rem You may obtain a copy of the License at +@rem +@rem https://www.apache.org/licenses/LICENSE-2.0 +@rem +@rem Unless required by applicable law or agreed to in writing, software +@rem distributed under the License is distributed on an "AS IS" BASIS, +@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +@rem See the License for the specific language governing permissions and +@rem limitations under the License. +@rem + +@if "%DEBUG%" == "" @echo off +@rem ########################################################################## +@rem +@rem Gradle startup script for Windows +@rem +@rem ########################################################################## + +@rem Set local scope for the variables with windows NT shell +if "%OS%"=="Windows_NT" setlocal + +set DIRNAME=%~dp0 +if "%DIRNAME%" == "" set DIRNAME=. +set APP_BASE_NAME=%~n0 +set APP_HOME=%DIRNAME% + +@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. +set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" + +@rem Find java.exe +if defined JAVA_HOME goto findJavaFromJavaHome + +set JAVA_EXE=java.exe +%JAVA_EXE% -version >NUL 2>&1 +if "%ERRORLEVEL%" == "0" goto init + +echo. +echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. +echo. +echo Please set the JAVA_HOME variable in your environment to match the +echo location of your Java installation. + +goto fail + +:findJavaFromJavaHome +set JAVA_HOME=%JAVA_HOME:"=% +set JAVA_EXE=%JAVA_HOME%/bin/java.exe + +if exist "%JAVA_EXE%" goto init + +echo. +echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% +echo. +echo Please set the JAVA_HOME variable in your environment to match the +echo location of your Java installation. + +goto fail + +:init +@rem Get command-line arguments, handling Windows variants + +if not "%OS%" == "Windows_NT" goto win9xME_args + +:win9xME_args +@rem Slurp the command line arguments. +set CMD_LINE_ARGS= +set _SKIP=2 + +:win9xME_args_slurp +if "x%~1" == "x" goto execute + +set CMD_LINE_ARGS=%* + +:execute +@rem Setup the command line + +set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar + +@rem Execute Gradle +"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% + +:end +@rem End local scope for the variables with windows NT shell +if "%ERRORLEVEL%"=="0" goto mainEnd + +:fail +rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of +rem the _cmd.exe /c_ return code! +if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 +exit /b 1 + +:mainEnd +if "%OS%"=="Windows_NT" endlocal + +:omega diff --git a/templates/web-template/settings.gradle.kts b/templates/web-template/settings.gradle.kts new file mode 100644 index 0000000000..781ae9381e --- /dev/null +++ b/templates/web-template/settings.gradle.kts @@ -0,0 +1,6 @@ +pluginManagement { + repositories { + gradlePluginPortal() + maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") + } +} \ No newline at end of file diff --git a/templates/web-template/src/main/kotlin/Main.kt b/templates/web-template/src/main/kotlin/Main.kt new file mode 100644 index 0000000000..3ac3204f24 --- /dev/null +++ b/templates/web-template/src/main/kotlin/Main.kt @@ -0,0 +1,11 @@ +import androidx.compose.web.elements.Div +import androidx.compose.web.elements.Text +import androidx.compose.web.renderComposable + +fun main() { + renderComposable(rootElementId = "root") { + Div { + Text("This is a template!") + } + } +} \ No newline at end of file diff --git a/templates/web-template/src/main/resources/index.html b/templates/web-template/src/main/resources/index.html new file mode 100644 index 0000000000..889b10a980 --- /dev/null +++ b/templates/web-template/src/main/resources/index.html @@ -0,0 +1,11 @@ + + + + + Template + + +
+ + + \ No newline at end of file diff --git a/tutorials/Web/Building_UI/README.md b/tutorials/Web/Building_UI/README.md index bd29f79b42..255c59da75 100644 --- a/tutorials/Web/Building_UI/README.md +++ b/tutorials/Web/Building_UI/README.md @@ -10,7 +10,7 @@ In this tutorial we will look at several examples that use the Composable DOM DS Compose for Web needs an HTML node that will be a root of its composition. Inside this root node, Compose then manages its own DOM tree. -```kotlin +``` kotlin renderComposable(rootElementId = "root") { // content goes here } @@ -22,7 +22,7 @@ While the DOM DSL for Compose for Web doesn't provide a Composable for every HTM Let's have a look at the Composable for a `Div` tag (most other tags have the same signature): -```kotlin +``` kotlin Div( attrs = { // specify attributes here @@ -37,7 +37,7 @@ Div( For convenience, some tags like `Input`, `A`, `Form`, or `Img` allow you to specify some extra parameters in the signature that are specific to the respective HTML tag. For example, let’s look at the `Input` tag: -```kotlin +``` kotlin Input( type = InputType.Text, // All InputTypes supported value = "", // sets the input value @@ -48,7 +48,7 @@ Input( We can use the `type` parameter which is provided for our convenience, or can use the `attrs` block to specify the input type: -```kotlin +``` kotlin Input(attrs = { type(InputType.Text) }) ``` @@ -56,13 +56,13 @@ Input(attrs = { type(InputType.Text) }) The `Text` allows you to add text content to an HTML tag. Besides, the text content it represents, it does not have any parameters: -```kotlin +``` kotlin Text("Arbitrary text") ``` If you want to apply styles to text, it needs to be wrapped in a container with a style applied, like a `Span` or `P`: -```kotlin +``` kotlin Span( style = { color("red") } // inline style ) { @@ -81,7 +81,7 @@ The `attrs` parameter (which we’ve already seen in some of the previous exampl The most flexible way to define attributes is by using the `attr` function, which allows you to specify the attribute name and its value. -```kotlin +``` kotlin Div( attrs = { attr(attr = "custom_attr", value = "its_value") @@ -95,7 +95,7 @@ However, with this approach, Compose for Web is not able to validate that the at Here are some examples of common attributes that are available for most Composables representing HTML tags: -```kotlin +``` kotlin attrs = { id("elementId") classes("cl1", "cl2") @@ -112,7 +112,7 @@ attrs = { Depending on the element you are working with, you may also have access to some specific attributes – attributes that are only meaningful for this particular tag. For example, the `A` tag provides some specific attributes, that are specific to hyperlinks: -```kotlin +``` kotlin A( attrs = { href("https://localhost:8080/page2") @@ -140,7 +140,7 @@ To discover all attributes that are available in your current scope, you can use You can declare event listeners in the `attrs` block: -```kotlin +``` kotlin Button( attrs = { onClick { println("Button clicked") } @@ -158,8 +158,7 @@ There are ways to set the style for a component: You can declare inline styles via the `style` block of a component: -```kotlin - +``` kotlin Div( style = { display(DisplayStyle.Flex) @@ -171,4 +170,86 @@ Div( ) { /* content goes here */ } ``` -You can find a more detailed overview of the style DSL, as well as additional examples here - [Style DSL](../Style_Dsl/README.md) \ No newline at end of file +You can find a more detailed overview of the style DSL, as well as additional examples here - [Style DSL](../Style_Dsl/README.md) + +### Runnable example + +```kotlin +import androidx.compose.web.elements.* +import androidx.compose.web.attributes.* +import androidx.compose.web.css.* +import androidx.compose.web.renderComposable + +fun main() { + renderComposable(rootElementId = "root") { + Div( + attrs = { + // specify attributes here + }, + style = { + // specify inline style here + } + ) { + Text("A text in
") + } + + Input( + type = InputType.Text, // All InputTypes supported + value = "", // sets the input value + attrs = {}, + style = {} + ) + + Input(attrs = { type(InputType.Text) }) + + Text("Arbitrary text") + + Span( + style = { color("red") } // inline style + ) { + Text("Red text") + } + + Div( + attrs = { + id("elementId") + classes("cl1", "cl2") + hidden(false) + title("title") + draggable(Draggable.Auto) + dir(DirType.Auto) + lang("en") + contentEditable(true) + + // custom attr + attr(attr = "custom_attr", value = "its_value") + } + ) { /* content */ } + + A( + attrs = { + href("https://localhost:8080/page2") + target(ATarget.Blank) + hreflang("en") + download("https://...") + } + ) { Text("Link") } + + Button( + attrs = { + onClick { println("Button clicked") } + } + ) { Text("Button") } + + 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") } + } +} +``` \ No newline at end of file diff --git a/tutorials/Web/Events_Handling/README.md b/tutorials/Web/Events_Handling/README.md index dcfe07acda..5412409360 100644 --- a/tutorials/Web/Events_Handling/README.md +++ b/tutorials/Web/Events_Handling/README.md @@ -5,7 +5,7 @@ You can add event listeners in the `attrs` block: #### onClick -```kotlin +``` kotlin Button( attrs = { onClick { wrappedMouseEvent -> @@ -21,7 +21,7 @@ Button( ``` #### onInput -```kotlin +``` kotlin val text = remember { mutableStateOf("") } TextArea( @@ -40,7 +40,7 @@ TextArea( 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: -``` +``` kotlin Form(attrs = { this.addEventListener("submit") { console.log("Hello, Submit!") @@ -54,3 +54,46 @@ https://developer.mozilla.org/en-US/docs/Web/API/Event 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 + +```kotlin +import androidx.compose.runtime.* +import androidx.compose.web.elements.* +import androidx.compose.web.attributes.* +import androidx.compose.web.renderComposable + +fun main() { + renderComposable(rootElementId = "root") { + Button( + attrs = { + onClick { wrappedMouseEvent -> + // wrappedMouseEvent is of `WrappedMouseEvent` type + println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}") + + val nativeEvent = wrappedMouseEvent.nativeEvent + } + } + ) { + Text("Button") + } + + val text = remember { mutableStateOf("") } + + TextArea( + value = text.value, + attrs = { + onTextInput { wrappedTextInputEvent -> + // wrappedTextInputEvent is of `WrappedTextInputEvent` type + text.value = wrappedTextInputEvent.inputValue + } + } + ) + + Span { + Text("Typed text = ${text.value}") + } + } +} +``` diff --git a/tutorials/Web/Getting_Started/README.md b/tutorials/Web/Getting_Started/README.md index ff157adbfa..2dd61c7a81 100644 --- a/tutorials/Web/Getting_Started/README.md +++ b/tutorials/Web/Getting_Started/README.md @@ -39,7 +39,7 @@ pluginManagement { ``` #### 3. Update `build.gradle.kts`: -```kotlin +``` kotlin // Add compose gradle plugin plugins { kotlin("multiplatform") version "1.5.0" @@ -90,6 +90,17 @@ kotlin { #### 7. Add the `Main.kt` file: ```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 + fun main() { var count: Int by mutableStateOf(0) @@ -105,7 +116,6 @@ fun main() { Text("$count") } - Button(attrs = { onClick { count += 1 } }) { @@ -115,13 +125,6 @@ fun main() { } } ``` -In case you see an error: -`Type 'MutableState' has no method 'getValue(Nothing?, KProperty<*>)'...` or -`Type 'MutableState' has no method 'setValue(Nothing?, KProperty<*>, Int)'...`, please add the imports: -```kotlin -import androidx.compose.runtime.getValue -import androidx.compose.runtime.setValue -``` ## Running the project diff --git a/tutorials/Web/Style_Dsl/README.md b/tutorials/Web/Style_Dsl/README.md index 7c1e831d0f..2b971b797c 100644 --- a/tutorials/Web/Style_Dsl/README.md +++ b/tutorials/Web/Style_Dsl/README.md @@ -9,7 +9,7 @@ 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 +``` kotlin Div( style = { display(DisplayStyle.Flex) @@ -31,7 +31,7 @@ In HTML, it will look like this: ### Stylesheet An alternative way is to define a Stylesheet that contains rules: -```kotlin +``` kotlin object AppStylesheet : StyleSheet() { val container by style { // container is a class display(DisplayStyle.Flex) @@ -72,7 +72,7 @@ In HTML, it will look like this: The Style DSL also provides a way to combine and unify selectors: -```kotlin +``` kotlin object AppStylesheet : StyleSheet() { init { @@ -116,7 +116,7 @@ object AppStylesheet : StyleSheet() { To specify media queries, you can use the `media` function, which takes the related query, and a block of styles: -```kotlin +``` kotlin object AppStylesheet : StyleSheet() { val container by style { padding(48.px) @@ -134,7 +134,7 @@ object AppStylesheet : StyleSheet() { The style DSL also provides support for CSS variables. -```kotlin +``` kotlin object MyVariables : CSSVariables { // declare a variable val contentBackgroundColor by variable() @@ -159,3 +159,54 @@ 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 + +object AppStylesheet : StyleSheet() { + val container by style { // container is a class + display(DisplayStyle.Flex) + padding(20.px) + + // custom property (or not supported out of a box) + property("font-family", value("Arial, Helvetica, sans-serif")) + } +} + +@Composable +fun Container(content: @Composable () -> Unit) { + Div( + attrs = { classes(AppStylesheet.container) } + ) { + content() + } +} + +fun main() { + renderComposable(rootElementId = "root") { + 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 */ } + + + Style(AppStylesheet) + + Container { + Text("Content") + } + } +} +``` \ No newline at end of file