Diseñando elementos HTML en Kotlin-js

¿Cómo puedo dar estilo a mis elementos HTML cuando uso Kotlinx-html ? Tengo mi aplicación funcionando bien, luego intenté agregar estilo usando AZA-Kotlin , pero una vez azadev.kotlin Me dio error de compilation. Mi código completo es el siguiente. :

Main.kt :

 import azadev.kotlin.css.Stylesheet import azadev.kotlin.css.color import azadev.kotlin.css.dimens.px import azadev.kotlin.css.opacity import azadev.kotlin.css.width import kotlinx.html.* import kotlinx.html.js.* import kotlinx.html.dom.create import kotlin.browser.* import kotlinx.html.dom.append import org.w3c.dom.HTMLButtonElement fun main(args: Array<String>) { println("Hello JavaScript!") val myDiv = document.create.div("panel") { // class = "panel" p { +"Here is " a("http://kotlinlang.org") { +"official Kotlin site" } } } val button = BUTTON() button!!.innerText = "Click me" button!!.onclick = { println("Button clicked!") } val btn = document.create.button { text("click me") onClickFunction = { _ -> window.alert("Kotlin!") } Stylesheet { color = 0xffffff width = 10.px opacity = .8 hover { color = 0xf2cacf } } } document.getElementById("container")!!.appendChild(myDiv) document.getElementById("container")!!.appendChild(btn) document.getElementById("container")!!.appendChild(button) document.getElementById("container")!!.append { div { +"added it" } } } fun BUTTON(): HTMLButtonElement {return document.create.button()} 

Mi gradle.build es:

 group 'org.example' version '1.0-SNAPSHOT' buildscript { ext.kotlin_version = '1.1.51' ext.kotlinx_html_version = '0.6.4' ext.aza_kotlin_css = '1.0' ext.web_dir = 'web' repositories { mavenCentral() } dependencies { classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" } } apply plugin: 'kotlin2js' repositories { mavenCentral() jcenter() } dependencies { compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" compile "org.jetbrains.kotlinx:kotlinx-html-js:$kotlinx_html_version" compile "azadev.kotlin:aza-kotlin-css:$aza_kotlin_css" } compileKotlin2Js { kotlinOptions.outputFile = "${projectDir}/web/scripts/main.js" kotlinOptions.moduleKind = "umd" kotlinOptions.sourceMap = true } clean.doFirst() { delete("${web_dir}") } build.doLast() { // Copy kotlin.js and kotlin-meta.js from jar into web directory configurations.compile.each { File file -> copy { includeEmptyDirs = false from zipTree(file.absolutePath) into "${projectDir}/${web_dir}/lib" include { fileTreeElement -> def path = fileTreeElement.path path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/")) } } } // Copy scripts to web directory copy { includeEmptyDirs = false from new File("build/classes/main") into "${web_dir}/lib" } // Copy resources to web directory copy { includeEmptyDirs = false from new File("src/main/kotlin/resources") into "${web_dir}" } } 

Mi index.html es:

 <html> <head> <meta charset="UTF-8"> <title>Sample Default</title> </head> <body id="BODY"> <h1>Kotlin 1.1 Example</h1> <div id="container"/> <input type="text" name="email" id="email"/> <script type="text/javascript" src="lib/kotlin.js"></script> <script type="text/javascript" src="lib/kotlinx-html-js.js"></script> <script type="text/javascript" src="scripts/main.js"></script> </body> </html> 

La estructura de mi aplicación: enter image description here

¿Cómo puedo Aza-kotlin mis elementos, independientemente de usar Aza-kotlin o de cualquier otra manera?

    Encontré la solución dentro de kotlinx-html , usando el style como:

     val btn = document.create.button { text("click me") onClickFunction = { _ -> window.alert("Kotlin!") } style = """ color: 0xffffff; width: 10.px; opacity: .8; hover { color : 0xf2cacf } """ } 

    La otra opción de saber es usar files css , y adjuntar las classs requeridas para el elemento, como:

     val btn = document.create.button(classes = "container left tree") { ... } //or val btn = document.create.button { classes = setOf("container", "left", "tree") classes += "siteHeader" // ... }