F# Feliz.Bulma 下拉/组合框答案

【问题标题】：F# Feliz.Bulma dropdown/comboboxF# Feliz.Bulma 下拉/组合框
【发布时间】：2021-08-16 11:32:39
【问题描述】：

我的问题很简单 - 如何在 SAFE 项目中创建组合框（下拉菜单）（使用 Feliz.Bulma）并以编程方式填充它。

在docs 中没有这样的组件。 This 是我找到的唯一示例 (Fulma)，但无法将其合并到我的项目中。

【问题讨论】：

你可能可以使用 Fulma，它返回的反应元素类型与 Feliz 使用的相同。（免责声明：我自己没试过）

【解决方案1】：

对于简单的下拉列表，您可以将Bulma.select 与Html.option 结合使用：

let dropDownValues = [
    0, "Zero"
    1, "One"
    2, "Two" ]

let dropDown =
    Bulma.select [
        prop.onChange (fun (v: int) -> dispatch ...)
        prop.children [
            for (value, text) in dropDownValues do
                Html.option [
                    prop.value value
                    prop.text text ] ] ]

【讨论】：

【解决方案2】：

我最终使用了 Fulma 代码：

let createManufacturerDropdown (dispatch: Msg2 -> unit) =
let cases = FSharpType.GetUnionCases typeof<Manufacturer>
Dropdown.dropdown [ Dropdown.IsHoverable
                     ] [
    Dropdown.trigger [] [
        Button.button [] [
            span [] [ str "Select Maker" ]
            Icon.icon [ Icon.Size IsSmall ] [
                Fa.i [ Fa.Solid.AngleDown ] []
            ]
        ]
    ]
    Dropdown.menu [  ] [
        Dropdown.content [] [
            for m in cases ->
             Dropdown.Item.a [  Dropdown.Item.Props[  OnClick (fun _ -> SelectedManufacturerName m.Name |> BikeScreenMsg |> dispatch)  ] ] 
                 [
                 str m.Name
             ]
        ]
    ]
]

【讨论】：