This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
We were not able to find the expected elm-package.json file at this tag.
Tag 2.0.0
Committed At 2018-09-01 19:59:45 UTC

Modules

    README

    elm-contextmenu

    Flexible context menu for Elm (Demo)

    Warning

    On the migration from Elm 0.18 to 0.19, the legacy Color type has changed to just a type alias of String like #aaa, rgb(100,100,200). Also, some icon libraries that uses Color type (i.e. FontAwesome, MaterialIcons) cannot be used anymore. So now you need to make a function typed as String -> Int -> Html msg. It should work but I haven't tested yet.

    I also think the implementation can be improved using new Browser API, but I cannot spend my time to try it. The styling method can be improved too. I would really appreciate if someone do that. Don't hesitate to fork this package or make your own from scratch! (This article may help.)

    How to use

    This component works with The Elm Architecture.

    1. Model

    type alias Model =
      { contextMenu : ContextMenu Context
      , config : ContextMenu.Config
      , message : String
      }
    

    2. Msg

    type Msg
      = ContextMenuMsg (ContextMenu.Msg Context)
      | Item Int
    

    3. Initialize

    init : Flags -> (Model, Cmd Msg)
    init flags =
      let
        (contextMenu, msg) = ContextMenu.init
      in
        ( { contextMenu = contextMenu
          }
        , Cmd.map ContextMenuMsg msg
        )
    

    4. Update

    update : Msg -> Model -> (Model, Cmd Msg)
    update msg model =
      case msg of
        ContextMenuMsg msg ->
          let
            (contextMenu, cmd) =
              ContextMenu.update msg model.contextMenu
          in
            ( { model | contextMenu = contextMenu }
            , Cmd.map ContextMenuMsg cmd
            )
    

    5. Subscribe

    subscriptions : Model -> Sub Msg
    subscriptions model =
      Sub.map ContextMenuMsg (ContextMenu.subscriptions model.contextMenu)
    

    6. View

    view : Model -> Html Msg
    view model =
      div
        [ ContextMenu.open ContextMenuMsg "context1" ]
        [ ContextMenu.view
            ContextMenu.defaultConfig
            ContextMenuMsg
            toItemGroups
            toItemGroups model.contextMenu
        ]
    
    toItemGroups : String -> List (List Item)
    toItemGroups context =
      if context == "context1" then
        [ [ (ContextMenu.item "Hey", Item 1)
          , (ContextMenu.item "Yo!", Item 2)
          ]
        ]
      else
        []
    

    License

    BSD-3-Clause