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

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

您可以为您的组件创建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

您可以自定义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代码中,您必须使用_来代替-否则会出错。

Interesting Posts