for more information visit the package's GitHub page
Package contains the following modules:
elm-dropdown
offers a flexible component which can serve as a foundation for custom dropdowns, select-inputs, popovers, and more.
A big thank you jschonenberg who originally authored this package. This version is a slightly modified version updated for Elm 0.19 and fixes, refactoring. Please be aware that usage is not completely identical to the original.
tab
, esc
).Basic example of use:
init : Model
init =
{ myDropdownIsOpen = False }
type alias Model =
{ myDropdownIsOpen : Dropdown.State }
type Msg
= ToggleDropdown Bool
update : Msg -> Model -> Model
update msg model =
case msg of
ToggleDropdown newState ->
{ model | myDropdownIsOpen = newState }
view : Model -> Html Msg
view { myDropdownIsOpen } =
div []
[ dropdown
{ identifier = "my-dropdown"
, toggleEvent = Dropdown.OnClick
, drawerVisibleAttribute = class "visible"
, onToggle = ToggleDropdown
, layout =
\{ toDropdown, toToggle, toDrawer } ->
toDropdown div
[]
[ toToggle button [] [ text "Toggle" ]
, toDrawer div
[]
[ button [] [ text "Option 1" ]
, button [] [ text "Option 2" ]
, button [] [ text "Option 3" ]
]
]
, isToggled = myDropdownIsOpen
}
]