thomasin / elm-menus / Preset.Listbox

A custom element with custom styling. This a basic first step, that doesn't include support for multi-select, always open listboxes, or grouped options.


type Model

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


type alias Msg =
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 Cmds to pass on. You will need to save the updated options and menu in your model.

Configuration


type Config option

Created in #config
This is passed into #update and #view and is used to control how the menu reacts to user input


type alias OptionConfig option =
{ 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

View


type Token option

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