Customize My Own Dropdown with elm-ui-dropdown
Since there is no select or dropdown component backed in into elm-ui, we will be adding another dependency to our project called PaackEng/elm-ui-dropdown and adding to it additional styles and settings so that it looks and behaves exactly as we want to.
To make this works, we need to make a few changes:
- We need to add a
dropdownState : Dropdown.State Stringto ourModel - Add a couple of extra variants to our
Msgtype:OptionPicked (Maybe String), to be dispatched by our dropdown whenever we click on any option, andDropdownMsg (Dropdown.Msg String)to update the internal state of the dropdown from the outside. - Construct our hardcoded list of options of type
List String. - Define a
dropdownConfig : Dropdown.Config String Msgthat is going to contain all our customisation of our dropdown. - Use
Dropdown.viewto display our custom dropdown wherever we need it.
i try follow your code but got err
./src/Main.elm Error: Compiler process exited with error Compilation failed Compiling ...-- TOO FEW ARGS --------------------------------------------------- src/Main.elm
The Config type needs 3 arguments, but I see 2 instead:
133| dropdownConfig : Dropdown.Config String Msg ^^^^^^^^^^^^^^^^^^^^^^^^^^ What is missing? Are some parentheses misplaced?
Detected problems in 1 module.
Hi! I've tried what you mention and it is true that in the latest version of elm-ui-dropdown it does not work, you need to use only version 2.0.0, above versions of such library the code for managing the selected items has changed and therefore is broken, but on that version it works fine, just tried out locally and in Ellie and it works 👍🏻 Thanks for letting me know!
and how can we do that?
You can download elm-json to manage your deps or run elm install PaackEng/elm-ui-dropdown@2.0.0 and pin it to a specific version 😉
Think this is not working anymore:
elm-json install PaackEng/elm-ui-dropdown@2.0.0 ... Because PaackEng/paack-ui 7.23.0 depends on PaackEng/elm-ui-dropdown 3.1.1 <= v < 4.0.0 and this project depends on PaackEng/elm-ui-dropdown 2.0.0, PaackEng/paack-ui 7.23.0 is incompatible with this project.
And because this project depends on PaackEng/paack-ui 7.23.0, no valid set of package versions could be found.
Think with this it works now:
elm-json install PaackEng/paack-ui@3.0.0 elm-json install PaackEng/elm-ui-dropdown@2.0.0