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

Question

我在网站上使用 Fable (2) + Fulma (1.1) + Elmish (2) UI 并且我想添加一个 Select 下拉列表，如 Bulma [=13] 中所述=].它为项目使用 <option> HTML 标签，但我在 Fulma 图书馆的任何地方都找不到它。在这种情况下，如何将任意标记写入我的视图？

Answer 1

您需要的具体内容是 in Fulma, but not immediately obvious in the documentation. It's there, but you need to look at the Fulma docs for Form elements 并查看他们的表单演示。在那里你会看到以下内容：

在演示中产生这个的源代码是这个部分：

   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 ]

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

How do you insert a custom HTML tag in Fulma/Fable?

html

f#

fable-f#

bulma