hercules-ci / elm-dropdown / Dropdown

Flexible dropdown component which serves as a foundation for custom dropdowns, select–inputs, popovers, and more.

Example

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

Configuration


type alias State =
Basics.Bool

Indicates wether the dropdown's drawer is visible or not.


type alias Config msg =
{ identifier : String
, toggleEvent : ToggleEvent
, drawerVisibleAttribute : Html.Attribute msg
, callback : Basics.Bool -> msg 
}

Configuration.


type ToggleEvent
    = OnClick
    | OnHover
    | OnFocus

Used to set the event on which the dropdown's drawer should appear or disappear.

Views

dropdown : (List (Html.Attribute msg) -> List (Html msg) -> Html msg) -> List (Html.Attribute msg) -> List (State -> Config msg -> Html msg) -> State -> Config msg -> Html msg

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
    myDropdownConfig

toggle : (List (Html.Attribute msg) -> List (Html msg) -> Html msg) -> List (Html.Attribute msg) -> List (Html msg) -> State -> Config msg -> Html msg

Transforms 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" ]

drawer : (List (Html.Attribute msg) -> List (Html msg) -> Html msg) -> List (Html.Attribute msg) -> List (Html msg) -> State -> Config msg -> Html msg

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" ]
    ]