Dropdown component
Opaque type that holds the configuration
Opaque type that holds the current state
Opaque type for internal library messages
newConfig : (Maybe item -> msg) -> (item -> String) -> Config msg item
Create a new configuration. This takes:
A message to trigger when an item is selected
A function to get a label to display from an item
Dropdown.newConfig OnSelect .label
withClear : Basics.Bool -> Config msg item -> Config msg item
Show or hide the clear (x) button, default is true
Dropdown.withClear False config
withPrompt : String -> Config msg item -> Config msg item
Add a prompt text to be displayed when no element is selected
Dropdown.withPrompt "Select a movie" config
withArrowClass : String -> Config msg item -> Config msg item
Add classes to the arrow wrapper
Dropdown.withArrowClass "arrow" config
withArrowStyles : List ( String, String ) -> Config msg item -> Config msg item
Add styles to the arrow wrapper
Dropdown.withArrowStyles [ ( "color", "red" ) ] config
withArrowSvgClass : String -> Config msg item -> Config msg item
Add classes to the arrow svg icon
Dropdown.withArrowSvgClass "arrow" config
withClearClass : String -> Config msg item -> Config msg item
Add classes to the clear button wrapper
Dropdown.withClearClass "clear" config
withClearStyles : List ( String, String ) -> Config msg item -> Config msg item
Add styles to the clear button wrapper
Dropdown.withClearStyles [ ( "color", "red" ) ] config
withClearSvgClass : String -> Config msg item -> Config msg item
Add classes to the clear icon
Dropdown.withClearSvgClass "clear" config
withItemClass : String -> Config msg item -> Config msg item
Add classes to the items in the list
Dropdown.withItemClass "bg-white" config
withItemStyles : List ( String, String ) -> Config msg item -> Config msg item
Add styles to the items in the list
Dropdown.withInputStyles [ ( "color", "red" ) ] config
withMenuClass : String -> Config msg item -> Config msg item
Add classes to the menu (list of items)
Dropdown.withMenuClass "bg-white" config
withMenuStyles : List ( String, String ) -> Config msg item -> Config msg item
Add styles to menu
Dropdown.withMenuStyles [ ( "color", "red" ) ] config
withPromptClass : String -> Config msg item -> Config msg item
Add classes to the prompt text (When no item is selected)
Dropdown.withPromptClass "prompt" config
withPromptStyles : List ( String, String ) -> Config msg item -> Config msg item
Add styles to prompt text
Dropdown.withPromptStyles [ ( "color", "red" ) ] config
withSelectedClass : String -> Config msg item -> Config msg item
Add classes to currently selected item in the menu
Dropdown.withSelectedClass "bg-white" config
withSelectedStyles : List ( String, String ) -> Config msg item -> Config msg item
Add styles to currently selected item in the menu
Dropdown.withSelectedStyles [ ( "color", "red" ) ] config
withTriggerClass : String -> Config msg item -> Config msg item
Add classes to trigger element
Dropdown.withTriggerClass "bg-white" config
withTriggerStyles : List ( String, String ) -> Config msg item -> Config msg item
Add styles to trigger element
Dropdown.withTriggerStyles [ ( "width", "100px" ) ] config
newState : String -> State
Create a new state. You must pass a unique identifier for each select component.
{
...
dropdownState = Dropdown.newState "dropdown1"
}
isOpen : State -> Basics.Bool
Get the current open state
view : Config msg item -> State -> List item -> Maybe item -> Html (Msg item)
Render the view
Html.map DropdownMsg (Dropdown.view dropdownConfig model.dropdownState model.items selectedItem)
update : Config msg item -> Msg item -> State -> ( State, Platform.Cmd.Cmd msg )
Update the component state
DropdownMsg subMsg ->
let
( updated, cmd ) =
Dropdown.update dropdownConfig subMsg model.dropdownState
in
( { model | dropdownState = updated }, cmd )