如何在Fulma / Fable中插入自定义HTML标签？

Question

我正在将寓言（2）+ Fulma（1.1）+ Elmish（2）用于Web UI，并且我想添加Bulma here中记录的Select下拉列表。它为项目使用了<option> HTML标记，但是我在Fulma库中的任何地方都找不到它。在这种情况下，如何将任意标签写入视图？

Answer 1

您需要的特定内容是in Fulma，但在文档中并没有立即看到。它在那里，但是您需要查看Fulma docs for Form elements并查看其Form演示。在那里，您将看到以下内容：

在演示中生成此代码的源代码是以下部分：

   Field.div [ ]
        [ Label.label [ ]
            [ str "Subject" ]
          Control.div [ ]
            [ Select.select [ ]
                [ select [ DefaultValue "2" ]
                    [ option [ Value "1" ] [ str "Value n°1" ]
                      option [ Value "2"] [ str "Value n°2" ]
                      option [ Value "3"] [ str "Value n°3" ] ] ] ] ]

我尚不知道如何插入任意标签；找到答案后，我将编辑此答案以包括该细节。但这应该可以解决您眼前的问题。

编辑：关于如何创建自定义元素，这是我在Fable.React source中找到的内容：

open Fable.React

let inline a props children = domEl "a" props children
let inline abbr props children = domEl "abbr" props children
let inline address props children = domEl "address" props children
// ...
let inline hr props = voidEl "hr" props
let inline img props = voidEl "img" props
let inline input props = voidEl "input" props
// ...
let inline svg props children = svgEl "svg" props children
let inline circle props children = svgEl "circle" props children
let inline clipPath props children = svgEl "clipPath" props children

因此Fable.React命名空间中包含三个基本函数：domEl，它具有标签名称，属性列表和子级列表； voidEl仅使用标签名称和属性列表（用于HTML定义为不具有子标签的标签），以及svgEl，其用于包含<svg>的元素定义而不是HTML（尽管实际上它的工作原理与domEl：as you can see, their definitions are exactly identical in Fable.React类似）。要创建自定义标签，您可以执行以下操作：

domEl "customTag" [ ] [ children ]

或者：

let inline custom props children = domEl "customTag" props children
custom [ ] [ children ]