Flexible dropdown component which serves as a foundation for custom dropdowns, select–inputs, popovers, and more.
Basic example of usage:
init : Model
init =
{ myDropdown = False }
type alias Model =
{ myDropdown : Dropdown.State }
type Msg
= ToggleDropdown Bool
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
ToggleDropdown newState ->
( { model | myDropdown = newState }, Cmd.none )
view : Model -> Html Msg
view model =
div []
[ dropdown
model.myDropdown
myDropdownConfig
(toggle button [] [ text "Toggle" ])
(drawer div
[]
[ button [] [ text "Option 1" ]
, button [] [ text "Option 2" ]
, button [] [ text "Option 3" ]
]
)
]
myDropdownConfig : Dropdown.Config Msg
myDropdownConfig =
Dropdown.Config
"myDropdown"
OnClick
(class "visible")
ToggleDropdownConfiguration.
identifier: unique identifier for the dropdown.toggleEvent: Event on which the dropdown's drawer should appear or disappear.drawerVisibleAttribute: Html.Attribute msg that's applied to the dropdown's drawer when visible.callback: msg which will be called when the state of the dropdown should be changed.Used to set the event on which the dropdown's drawer should appear or disappear.
Creates a dropdown using the given state, config, toggle, and drawer.
dropdown div
[]
[ toggle button
[ class "myButton" ] [ text "More options" ]
, drawer div
[ class "myDropdownDrawer" ]
[ button [ onClick NewFile ] [ text "New" ]
, button [ onClick OpenFile ] [ text "Open..." ]
, button [ onClick SaveFile ] [ text "Save" ]
]
]
model.myDropdownState
myDropdownConfigTransforms the given HTML-element into a working toggle for your dropdown.
See dropdown on how to use in combination with drawer.
Example of use:
toggle button
[ class "myButton" ]
[ text "More options" ]Transforms the given HTML-element into a working drawer for your dropdown.
See dropdown on how to use in combination with toggle.
Example of use:
drawer div
[ class "myDropdownDrawer" ]
[ button [ onClick NewFile ] [ text "New" ]
, button [ onClick OpenFile ] [ text "Open..." ]
, button [ onClick SaveFile ] [ text "Save" ]
]
Indicates wether the dropdown's drawer is visible or not.