This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0
Dropdown menus that allow multiple options to be selected at once.
version 1.0.0
license MIT
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.1
Committed At 2018-08-03 17:17:06 UTC
elm-tools/parser 2.0.1 <= v < 3.0.0 2.0.1
elm-lang/svg 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/navigation 2.1.0 <= v < 3.0.0 2.1.0
elm-lang/keyboard 1.0.1 <= v < 2.0.0 1.0.1
elm-lang/http 1.0.0 <= v < 2.0.0 1.0.0
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/dom 1.1.1 <= v < 2.0.0 1.1.1
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1

README

Elm Multiselect Menu

This library helps you create a simple dropdown menu that allows you to select multiple options at once.

  • Can support options of any type
  • May be configured as a drop-up menu
  • Optional "Check All"/"Uncheck All" buttons

Usage

See the docs and example app (source) for more details.

A simple example (although more configurations may be added):

module Example exposing (..)

import MultiselectMenu
import Html
import Html.Attributes as Attr

main : Program Never Model Msg
main =
    Html.program
        { init = init
        , update = update
        , view = view
        , subscriptions = always Sub.none
        }

type alias Model =
    { itemsList : List ( String, Bool )
    , dropdownState : MultiselectMenu.State
    }


init : ( Model, Cmd Msg )
init =
    ( { itemsList = [ ( "Apple", False ), ( "Banana", False ), ( "Clementine", False ), ( "Dragon Fruit", False ) ]
      , dropdownState = MultiselectMenu.init
      }
    , Cmd.none
    )


view : Model -> Html.Html Msg
view { itemsList, dropdownState } =
    Html.div []
        [ Html.div [ Attr.style [ ( "margin", "200px auto" ), ( "width", "200px" ) ] ]
            [ MultiselectMenu.view
                fruitConfig
                dropdownState
                itemsList
            ]
        ]


type Msg
    = SetDropdownState MultiselectMenu.State
    | ToggleDropdownItem (String, Bool)

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        SetDropdownState newState ->
            ( { model | dropdownState = newState }
            , Cmd.none
            )
        ToggleDropdownItem item ->
            ( { model | itemsList = MultiselectMenu.toggleItem item model.itemsList }
            , Cmd.none
            )


fruitConfig : MultiselectMenu.Config (String, Bool) Msg
fruitConfig =
    MultiselectMenu.config
        { displayText = "Fruit"
        , stateToMsg = SetDropdownState
        , toggleItem = ToggleDropdownItem
        }