Dropdown

Dropdown component

Types

type Config msg item

Opaque type that holds the configuration

type State

Opaque type that holds the current state

type Msg item

Opaque type for internal library messages

Configuration

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

Styling

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

State

newState : String -> State

Create a new state. You must pass a unique identifier for each select component.

{
    ...
    dropdownState = Dropdown.newState "dropdown1"
}

isOpen : State -> Bool

Get the current open state

view

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

update : Config msg item -> Msg item -> State -> ( State, Cmd msg )

Update the component state

DropdownMsg subMsg ->
    let
        ( updated, cmd ) =
            Dropdown.update dropdownConfig subMsg model.dropdownState
    in
        ( { model | dropdownState = updated }, cmd )

Modules

Dropdown

EdutainmentLIVE/elm-dropdown/1.0.0