https://github.com/jinjor/elm-contextmenu
Flexible context menu for Elm
https://github.com/jinjor/elm-contextmenu
context-menu contextmenu elm elm-contextmenu
Last synced: 8 months ago
JSON representation
Flexible context menu for Elm
- Host: GitHub
- URL: https://github.com/jinjor/elm-contextmenu
- Owner: jinjor
- License: bsd-3-clause
- Created: 2016-11-07T03:32:17.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-01-07T09:24:42.000Z (about 4 years ago)
- Last Synced: 2025-04-08T05:35:11.866Z (12 months ago)
- Topics: context-menu, contextmenu, elm, elm-contextmenu
- Language: Elm
- Homepage: http://package.elm-lang.org/packages/jinjor/elm-contextmenu/latest
- Size: 260 KB
- Stars: 15
- Watchers: 1
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
elm-contextmenu
===
Flexible context menu for Elm ([Demo](https://jinjor.github.io/elm-contextmenu/))
## 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](http://jinjor-labo.hatenablog.com/entry/2016/11/05/201107) may help.)
## How to use
This component works with [The Elm Architecture](https://guide.elm-lang.org/architecture/).
1. Model
```elm
type alias Model =
{ contextMenu : ContextMenu Context
, config : ContextMenu.Config
, message : String
}
```
2. Msg
```elm
type Msg
= ContextMenuMsg (ContextMenu.Msg Context)
| Item Int
```
3. Initialize
```elm
init : Flags -> (Model, Cmd Msg)
init flags =
let
(contextMenu, msg) = ContextMenu.init
in
( { contextMenu = contextMenu
}
, Cmd.map ContextMenuMsg msg
)
```
4. Update
```elm
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
```elm
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.map ContextMenuMsg (ContextMenu.subscriptions model.contextMenu)
```
6. View
```elm
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