html - 如何在Kotlin html框架中表示Web组件标签？

Question

Kotlin具有表示html的框架，例如kotlinx。如何在此类框架中表示Web组件标签？例如，如果我要使用Polymer组件，是否必须扩展这些框架以包括每个Polymer组件？

Answer 1

您可以Customize Kotlinx(创建Custom Tag)。对于在dicom-editor中使用的名为divs的标签:

class DicomEditor(consumer: TagConsumer<*>) :
        HTMLTag("dicom-editor", consumer, emptyMap(),
                inlineTag = true,
                emptyTag = false), 
        HtmlInlineTag {}

fun DIV.dicom_editor(block: DicomEditor.() -> Unit = {}) {
    DicomEditor(consumer).visit(block)
}
...
div{
    dicom_editor {
        onMouseDownFunction = {_ ->
            window.alert("Dicom Editor")
        }
    }
}

在上面的示例中， dicom_editor调用包括鼠标按下事件的回调。您还可以添加属性: attributes["data-toggle"] = "dropdown"
您可以将属性添加为字段:

class DicomEditor(consumer: TagConsumer<*>) :
        HTMLTag("dicom-editor", consumer, emptyMap(),
                inlineTag = true,
                emptyTag = false), 
        HtmlInlineTag {
            var data_toggle: String = ""
                set(x) {attributes["data-toggle"] = x}
        }

fun DIV.dicom_editor(block: DicomEditor.() -> Unit = {}) {
    DicomEditor(consumer).visit(block)
}
...
div{
    dicom_editor {
        data_toggle = "dropdown"
    }
}

在Kotlin代码中，您必须使用 _代替 -，否则会出现错误。