F# Feliz.Bulma dropdown/combobox

524 Views Asked by At

My question is very simple - how to create combobox (dropdown) in SAFE project (using Feliz.Bulma) and populate it programmatically.

In the docs there is no such component. This is the only example (Fulma) I found and can not incorporate it in my project.

2

There are 2 best solutions below

1
On

For a simple dropdown you can use Bulma.select in combination with 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 ] ] ]
0
On

I end up using Fulma code:

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