Opaque type that holds the current state

type alias Model =
    { dropdownState : Dropdown.State String
    }

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

{
    ...
    dropdownState = Dropdown.init "country-dropdown"
}

Opaque type for the internal dropdown messages

Opaque type that holds the current config

dropdownConfig =
    Dropdown.basic DropdownMsg OptionPicked Element.text Element.text

Create a basic configuration. This takes:

- The message to wrap all the internal messages of the dropdown
- A message to trigger when an item is selected
- A function to get the Element to display from an item, to be used in the select part of the dropdown
- A function to get the Element to display from an item, to be used in the item list of the dropdown


Dropdown.basic DropdownMsg OptionPicked Element.text Element.text

Create a filterable configuration. This takes:

- The message to wrap all the internal messages of the dropdown
- A message to trigger when an item is selected
- A function to get the Element to display from an item, to be used in the select part of the dropdown
- A function to get the Element to display from an item, to be used in the item list of the dropdown
- A function to get the text representation from an item, to be used when filtering elements in the list


Dropdown.basic DropdownMsg OptionPicked Element.text Element.text

Create a multiselect configuration. This takes:

- The message to wrap all the internal messages of the dropdown
- A message to trigger when an item is selected
- A function to get the Element to display from the list of selected items, to be used in the select part of the dropdown
- A function to get the Element to display from an item, to be used in the item list of the dropdown


Dropdown.multiselect DropdownMsg OptionsPicked Element.text Element.text

Sets the container visual attributes, default is empty

Dropdown.withContainerAttributes [ width (px 300) ] config

Sets the content of the Select, default is "-- Select --"

Dropdown.withPromptElement (el [ Font.color (rgb255 123 123 123) ] <| text "Pick one") config

Sets the placeholder of the Filterable dropdown, default is "Filter values"

Dropdown.withFilterPlaceholder "Type here..." config

Sets the select visual attributes, default is empty

Dropdown.withSelectAttributes [ Border.width 1, Border.rounded 5, paddingXY 16 8 ] config

Sets the search visual attributes, default is empty

Dropdown.withSearchAttributes [ Border.width 0, padding 0 ] config

Sets the open and close buttons' visual attributes, default is empty

Dropdown.withOpenCloseButtons { openButton = text "+", closeButton = "-" } config

Sets the item list visual attributes, default is empty

Dropdown.withListAttributes [ Border.width 1, Border.rounded ] config

Update the component state

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

Render the view

Dropdown.view dropdownConfig model.dropdownState model.items

Serves as a subscription to know when the user has clicked outside a certain dropdown

- dropdownState: State of the dropdown we want to subscribe to
- dropdownMsg: The message to wrap all the internal messages of the dropdown


subscriptions : Model -> Sub Msg
subscriptions model =
    Dropdown.onOutsideClick model.dropdownState DropdownMsg