The ContextMenu component that follows the Elm Architecture.
See How to use.
The boilerplace functions. See The Elm Architecture for more information.
The Model. Put whatever context you like, which is used to create menu items.
The Message.
init : ( ContextMenu context, Platform.Cmd.Cmd (Msg context) )
The init function.
update : Msg context -> ContextMenu context -> ( ContextMenu context, Platform.Cmd.Cmd (Msg context) )
The update function.
subscriptions : ContextMenu context -> Platform.Sub.Sub (Msg context)
The Subscription.
The menu item. You can construct it with pipe-friendly functions.
ContextMenu.item "Take photos"
-- This library is outdated. See README.
-- |> ContextMenu.icon FontAwesome.camera Color.green
|> ContextMenu.disabled True
item : String -> Item
Creates a simple text item.
itemWithAnnotation : String -> String -> Item
Creates an item with annotation which will displayed just below the item name.
disabled : Basics.Bool -> Item -> Item
Disables the item. True = disabled, False = enabled.
icon : (String -> Basics.Int -> Html Basics.Never) -> String -> Item -> Item
Shows the icon.
The first argument is a function that creates an icon,
given a color string(like #fff
, rgb(100,200,200)
, etc.) and icon size (px).
shortcut : String -> Item -> Item
Displays the shortcut key at the right.
{ width : Basics.Int
, direction : Direction
, overflowX : Overflow
, overflowY : Overflow
, containerColor : Color
, hoverColor : Color
, invertText : Basics.Bool
, cursor : Cursor
, rounded : Basics.Bool
, fontFamily : String
}
Defines the styles of the menu. See examples.
The default direction the menu will be shown at.
The strategies how to show the menu when it goes out of window.
The shape of cursor during hovering on the menu.
defaultConfig : Config
The default config.
defaultConfig =
{ width = 300
, direction = RightBottom
, overflowX = Mirror
, overflowY = Mirror
, containerColor = "white"
, hoverColor = "rgb(240 240 240)"
, invertText = False
, cursor = Pointer
, rounded = False
, fontFamily = "initial"
}
view : Config -> (Msg context -> msg) -> (context -> List (List ( Item, msg ))) -> ContextMenu context -> Html msg
Shows the menu. This should be called at only one place.
Arguments:
open : (Msg context -> msg) -> context -> Html.Attribute msg
Makes the attribute that triggers to open the menu. This attribute is passed for each element that needs a menu.
Arguments:
openIf : Basics.Bool -> (Msg context -> msg) -> context -> Html.Attribute msg
Similar to open
but only works under particular condition.
This is useful for debugging on browser.
setOnDehover : Basics.Bool -> ContextMenu context -> ContextMenu context
This switches when the menu should be closed.