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

Kotlin有代表html的框架，比如kotlinx 。 如何在这样的框架中表示Web组件标签？ 例如，如果我想使用Polymer组件，是否必须扩展这些框架以包含每个Polymer组件？

Answer 1

您可以为您的组件创建XSD文件并自动生成它们。 这正是kotlinx如何做的。

发电机是该项目的一部分。 看看这里： https ： //github.com/Kotlin/kotlinx.html/tree/master/generate

资源文件夹中还有HTML5的源XSD文件： https ： //github.com/Kotlin/kotlinx.html/blob/master/generate/src/main/resources/html_5.xsd

Answer 2

您可以自定义Kotlinx （创建自定义标签 ）。 对于一个名为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" ： 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代码中，您必须使用_来代替-否则会出错。