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

Question

我正在使用Fable (2) + Fulma (1.1) + Elmish (2)作为一个web，我想添加一个Select下拉列表，如Bulma 这里中所记录的那样。它对项目使用了<option> HTML标记，但是我在Fulma中找不到它。在这种情况下，如何将任意标记写入视图？

Answer 1

您需要的具体内容是在富尔马，但在文档中并不是显而易见的。它就在那里，但是您需要查看表单元素的Fulma文档并查看它们的表单演示。在这里，您将看到以下内容：

​

​

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

   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，它只接受标记名称和属性列表(对于定义为没有子元素的标记)；svgEl，用于作为<svg>定义一部分的元素，而不是HTML (尽管在实践中，它的工作方式与domEl：如您所见，它们的定义在Fable.React中完全相同完全一样)。要创建自定义标记，您可以这样做：

domEl "customTag" [ ] [ children ]

或者：

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