javascript - 使用 kotlinx.html DSL 创建 CSS 类

Question

我正在使用Kotlin to Javascript插件和kotlinx.html库来构建示例应用程序：

fun main(args: Array<String>) {
    window.onload = {
        document.body!!.append.div {
            a("#", classes = "red") {
                +"Link"
            }
        }
    }
}

我想a将带有“红色” CSS 类的链接绘制为红色。
现在我使用unsage+raw来做到这一点：

document.head!!.append.style {
    unsafe {
        raw(".red { background: #f00; }")
    }
}

如何使用 kotlinx.html DSL 创建 CSS 类？我没有找到任何与 css DSL 相关的文档。

Answer 1

您不能使用 HTML DSL 来创建 CSS。在 HTML 中使用 css 有两种可能的方式。

1）您独立创建 CSS 文件，然后classes按照您的建议使用。2）如果这对您的应用程序可行，则内联 CSS。

h1("h1Class") {
    style = "background-color:red"
    +"My header1"
}

这导致：

<h1 class="h1Class" style="background-color:red">My header1</h1>

Answer 2

kotinx-html 是仅用于 HTML 的 DSL。所以 CSS 需要单独构建。你需要的是 kotlinx.css，但它很不受欢迎，所以它被停产了。可以肯定的是，很少有针对此目的的社区库，但不确定它们是否还存在。