A custom
Stores whether the menu is open or not, and which option is currently focussed.
It does not store which option is selected.
Is updated and returned in the #update function.
init : Model
Initialise a closed menu, you can use this in your own init function
Internal.Msg
Passed in to #update
update : Msg -> { model : Model, config : Config option, options : ZipList option } -> ( ZipList option, Model, Platform.Cmd.Cmd Msg )
Call this in your own update function, it returns the list of options with the correct selection,
the dropdown model, and Cmd
s to pass on. You will need to save the updated options and menu in your model.
Created in #config
This is passed into #update and #view and is used to control how the menu reacts to user input
{ id : String
, optionToLabel : option -> String
}
Passed in to #config
The id
field must be unique, and is displayed in the HTML, used for accessibility
The optionToLabel
field allows users to use keyboard input to search for options
config : OptionConfig option -> Config option
Create a #Config type
Created automatically when you call #view, pass it in to view functions
isOpen : Token option -> Basics.Bool
Check whether the menu is open or closed
focussedOption : Token option -> Maybe Basics.Int
Which option is focussed (returns an index)
view : { model : Model, config : Config option, options : ZipList option } -> (Token option -> ZipList option -> Html Msg) -> Html Msg
This needs to wrap your menu. It does not render any HTML, but provides a #Token that you pass into view functions, and also the current options.
options : Token option -> List (Html.Attribute Msg) -> List (Html Msg) -> Html Msg
A wrapper for the list of options in the menu. This should be a direct parent of your list of option nodes.
button : Token option -> List (Html.Attribute Msg) -> List (Html Msg) -> Html Msg
The button used to open and close the menu
option : Token option -> { value : Basics.Int, isSelected : Basics.Bool } -> List (Html.Attribute Msg) -> List (Html Basics.Never) -> Html Msg
A focusable and selectable option