Ui.Action

User actions are DOM events like clicks, key presses, and other mouse gestures that do not capture text or numeric input. Handlers for user actions can be added to any UI element using the functions in this module (for capturing input, see Ui.Input).

To add a user-action handler to an element, you must specify the event name and the message that you want to be sent to your Elm program's update function when the event is triggered. To handle keyboard actions, you will also have to specify the key value of interest, which you can do using one of the helper functions below.

Generic functions for constructing user-action handlers

add : ( String, msg ) -> Element msg -> Element msg

Add a single action to a UI element

myElement
  |> Ui.Action.add ("click", DoSomething)

addList : List ( String, msg ) -> Element msg -> Element msg

Add a list of actions to a UI element

myElement
  |> Ui.Action.addList
    [ ("mouseover", DoSomething)
    , ("click", DoSomethingElse)
    ]

Helpers for common mouse actions

onClick : msg -> Element msg -> Element msg

Convience function to construct a handler for a "click" event

myElement
  |> Ui.Action.onClick DoSomething

onMouseOver : msg -> Element msg -> Element msg

Convience function to construct a handler for a "mouseover" event

myElement
  |> Ui.Action.onMouseOver DoSomething

onMouseOut : msg -> Element msg -> Element msg

Convience function to construct a handler for a "mouseout" event

myElement
  |> Ui.Action.onMouseOut DoSomething

Helpers for keyboard actions

onKeyPress : ( String, msg ) -> Element msg -> Element msg

Helper to construct a handler for a keypress event, where you only want the message to be triggered by a particular key being in pressed position. The string argument gives the keyboard value of interest, which must specified by one of the following: + If the pressed key has a printed representation, the returned value is a non-empty Unicode character string containing the printable representation of the key. + If the pressed key is a control or special character, the returned value is one of the pre-defined key values in this table.

myElement
  |> Ui.Action.onKeyPress ("Enter", DoSomething)

onKeyDown : ( String, msg ) -> Element msg -> Element msg

Helper to construct a handler for a keydown event, where you only want the message to be triggered by a particular key being pressed down. The string argument gives the keyboard value of interest, which must specified by one of the following: + If the pressed key has a printed representation, the returned value is a non-empty Unicode character string containing the printable representation of the key. + If the pressed key is a control or special character, the returned value is one of the pre-defined key values in this table.

myElement
  |> Ui.Action.onKeyDown ("ArrowUp", DoSomething)

onKeyUp : ( String, msg ) -> Element msg -> Element msg

Helper to construct a handler for a keyup event, where you only want the message to be triggered by a particular key being released from pressed position. The string argument gives the keyboard value of interest, which must specified by one of the following: + If the pressed key has a printed representation, the returned value is a non-empty Unicode character string containing the printable representation of the key. + If the pressed key is a control or special character, the returned value is one of the pre-defined key values in this table.

myElement
  |> Ui.Action.onKeyUp ("ArrowUp", DoSomething)

danielnarey/elm-modular-ui/1.0.0

Ui.Action

Customizing UI Elements: User Actions

Generic functions for constructing user-action handlers

Helpers for common mouse actions

Helpers for keyboard actions

Modules