f# - F# Feliz.Bulma 下拉/组合框

Question

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

在文档中没有这样的组件。这是我发现的唯一示例（Fulma），无法将其合并到我的项目中。

Answer 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 ] ] ]

Answer 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
             ]
        ]
    ]
]