在Kotlin-js中设计HTML元素

我怎样才能风格我的HTML元素，当使用Kotlinx-html ，我的应用程序工作正常，然后我尝试使用AZA-Kotlin添加样式，但是一旦我导入了azadev.kotlin它给了我错误生成我的完整代码如下：

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) { 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()} 

我的gradle.build是：

 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}" } } 

我的index.html是：

       
Kotlin 1.1 Example
 
       

我的应用程序结构

无论使用Aza-kotlin还是其他任何方式，我如何设计我的元素。

Answer 1

我在kotlinx-html本身中find了解决方案，方法如下：

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

另一个知道的选择是使用css文件，并附加元素所需的类，如：

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