Elm UI Dropdown.
basic : { itemsFromModel : model -> List item, selectionFromModel : model -> Maybe item, dropdownMsg : Msg item -> msg, onSelectMsg : Maybe item -> msg, itemToPrompt : item -> Element msg, itemToElement : Basics.Bool -> Basics.Bool -> item -> Element msg } -> Config item msg model
Create a basic configuration. This takes:
itemsFromModel
: The list of items to display in the dropdown (as a function of the model)selectionFromModel
: The function to get the selected item from the modeldropdownMsg
: The message to wrap all the internal messages of the dropdownonSelectMsg
: A message to trigger when an item is selecteditemToPrompt
: A function to get the Element to display from an item, to be used in the select part of the dropdownitemToElement
: A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdownfilterable : { itemsFromModel : model -> List item, selectionFromModel : model -> Maybe item, dropdownMsg : Msg item -> msg, onSelectMsg : Maybe item -> msg, itemToPrompt : item -> Element msg, itemToElement : Basics.Bool -> Basics.Bool -> item -> Element msg, itemToText : item -> String } -> Config item msg model
Create a filterable configuration. This takes:
itemsFromModel
: The list of items to display in the dropdown (as a function of the model)selectionFromModel
: The function to get the selected item from the modeldropdownMsg
: The message to wrap all the internal messages of the dropdownonSelectMsg
: A message to trigger when an item is selecteditemToPrompt
: A function to get the Element to display from an item, to be used in the select part of the dropdownitemToElement
: A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdownitemToText
: A function to get the text representation from an item, to be used when filtering elements in the listmulti : { itemsFromModel : model -> List item, selectionFromModel : model -> List item, dropdownMsg : Msg item -> msg, onSelectMsg : List item -> msg, itemsToPrompt : List item -> Element msg, itemToElement : Basics.Bool -> Basics.Bool -> item -> Element msg } -> Config item msg model
Create a multiselect configuration. This takes:
itemsFromModel
: The list of items to display in the dropdown (as a function of the model)selectionFromModel
: The function to get the selected items from the modeldropdownMsg
: The message to wrap all the internal messages of the dropdownonSelectMsg
: A message to trigger when an item is selecteditemsToPrompt
: A function to get the Element to display from the list of selected items, to be used in the select part of the dropdownitemToElement
: A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdownautocompleteHelper : { itemsFromModel : model -> List item, selectionFromModel : model -> Maybe item, dropdownMsg : Msg item -> msg, onSelectMsg : Maybe item -> msg, onFilterChangeMsg : Maybe (String -> msg), itemToPrompt : item -> Element msg, itemToElement : Basics.Bool -> Basics.Bool -> item -> Element msg, itemToText : item -> String } -> Config item msg model
Create a configuration which can be used as an autocomplete. It emits a message on every filter change which can be handled in parent application to fetch predictions. This takes:
itemsFromModel
: The list of items to display in the dropdown (as a function of the model)selectionFromModel
: The function to get the selected item from the modeldropdownMsg
: The message to wrap all the internal messages of the dropdownonSelectMsg
: A message to trigger when an item is selectedonFilterChangeMsg
: A message emitted when text in the search input changes, this message can be used to fetch predictions from a remote server to be rendered in the dropdownitemToPrompt
: A function to get the Element to display from an item, to be used in the select part of the dropdownitemToElement
: A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdownitemToText
: A function to get the text representation from an item, to be used when filtering elements in the listOpaque type that holds the current config
dropdownConfig =
Dropdown.basic
{ allItems = always [ "apples", "bananas", "oranges" ]
, selectedItem = .selectedFruit
, dropdownMsg = DropdownMsg
, onSelectMsg = FruitPicked
, itemToPrompt = Element.text
, itemToElement = \selected -> \highlighted -> Element.text
}
Opaque type that holds the current state
type alias Model =
{ dropdownState : Dropdown.State
}
Opaque type for the internal dropdown messages
init : String -> State item
Create a new state. You must pass a unique identifier for each dropdown component.
{
...
dropdownState = Dropdown.init "country-dropdown"
}
update : Config item msg model -> Msg item -> model -> State item -> ( State item, Platform.Cmd.Cmd msg )
Update the component state
DropdownMsg subMsg ->
let
( updated, cmd ) =
Dropdown.update dropdownConfig subMsg model model.dropdownState model.items
in
( { model | dropdownState = updated }, cmd )
view : Config item msg model -> model -> State item -> Element msg
Render the view
Dropdown.view dropdownConfig model model.dropdownState model.items
Allows tests with elm-program-test
mapEffect : (a -> b) -> Effect a -> Effect b
Same as Cmd.map
, but for an Effect
.
performEffect : Effect msg -> Platform.Cmd.Cmd msg
Resolves Effect
as Elm's Cmd
s. If you plan to implement this yourself, it looks like this:
performEffect : Effect msg -> Cmd msg
performEffect effect =
case effect of
Loopback msg ->
Task.perform identity <| Task.succeed msg
DomFocus msg id ->
Task.attempt msg (Dom.focus id)
updateWithoutPerform : Config item msg model -> Msg item -> model -> State item -> ( State item, List (Effect msg) )
Same as update
but returning a list of Effect
.
onOutsideClick : State item -> (Msg item -> msg) -> Platform.Sub.Sub msg
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
withContainerAttributes : List (Element.Attribute msg) -> Config item msg model -> Config item msg model
Sets the container visual attributes, default is empty
Dropdown.withContainerAttributes [ width (px 300) ] config
withEmptyListElement : Element msg -> Config item msg model -> Config item msg model
When the list is empty, show this element instead.
Most useful in filterable, it shows up when nothing matches the filter value.
withFilterPlaceholder : String -> Config item msg model -> Config item msg model
Sets the placeholder of the Filterable dropdown, default is "Filter values"
Dropdown.withFilterPlaceholder "Type here..." config
withListAttributes : List (Element.Attribute msg) -> Config item msg model -> Config item msg model
Sets the item list visual attributes, default is empty
Dropdown.withListAttributes [ Border.width 1, Border.rounded ] config
withOpenCloseButtons : { openButton : Element msg, closeButton : Element msg } -> Config item msg model -> Config item msg model
Sets the open and close buttons' visual attributes, default is empty
Dropdown.withOpenCloseButtons { openButton = text "+", closeButton = "-" } config
withPromptElement : Element msg -> Config item msg model -> Config item msg model
Sets the content of the Select, default is "-- Select --"
Dropdown.withPromptElement (el [ Font.color (rgb255 123 123 123) ] <| text "Pick one") config
withSearchAttributes : List (Element.Attribute msg) -> Config item msg model -> Config item msg model
Sets the search visual attributes, default is empty
Dropdown.withSearchAttributes [ Border.width 0, padding 0 ] config
withSelectAttributes : List (Element.Attribute msg) -> Config item msg model -> Config item msg model
Sets the select visual attributes, default is empty
Dropdown.withSelectAttributes [ Border.width 1, Border.rounded 5, paddingXY 16 8 ] config