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

Question

我正在使用 Fable (2) + Fulma (1.1) + Elmish (2) 作为 Web UI，我想添加一个 Select 下拉列表，如 Bulma here 中所述。它<option>为项目使用了HTML 标记，但我在 Fulma 库中的任何地方都找不到它。在这种情况下，如何将任意标签写入我的视图？

Answer 1

您需要的具体内容在 Fulma 中，但在文档中并不明显。它就在那里，但您需要查看Fulma 文档中的 Form 元素并查看他们的 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 源中找到的内容：

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：当你可以看到，它们的定义在 Fable.React 中完全相同）。要创建自定义标签，您可以执行以下任一操作：

domEl "customTag" [ ] [ children ]

或者：

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