This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0
Component to serve as a foundation for custom dropdowns.
version 1.0.1
license BSD-3-Clause
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.1
Committed At 2017-07-11 10:54:57 UTC
elm-lang/keyboard 1.0.1 <= v < 2.0.0 1.0.1
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1
elm-community/json-extra 2.1.0 <= v < 3.0.0 2.7.0

Modules

README

elm-dropdown

elm-dropdown offers a flexible component which can serve as a foundation for custom dropdowns, select-inputs, popovers, and more.

Features:

  • Pure, state gets passed in from the parent.
  • Use any HTML-element as toggle or drawer.
  • Choose for toggle on on click, hover, or focus.
  • Supports keyboard navigation (tab, esc).
  • No backdrop-element, direct interaction with other elements is possible.
  • Unassuming about visual style, bring your own CSS.

Example

Basic example of use:

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")
        ToggleDropdown