elm-contextmenu
Flexible context menu for Elm (Demo)
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 Int3. Initialize
init : (Model, Cmd Msg)
init =
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
BSD3
