OUI.MenuButton

A button+menu creation API

The button will open a menu when clicked.

type MenuButton btnC item msg

A Button + Menu component

type Align

= AlignTopLeft

| AlignTopRight

| AlignBottomRight

| AlignBottomLeft

Menu alignment

type Key

= ArrowDown

| ArrowUp

| Enter

| Esc

Keys

Constructor

new :

(Msg item msg -> msg)

-> (item -> msg)

-> Button { btnC | needOnClickOrDisabled : () } msg

-> Menu item msg

-> MenuButton btnC item msg

Creates a new button + menu

The button must not have any action defined on it

MenuButton.new (MenuButtonMsg "menu1")
    OnMenu1Click
    (Button.new "click me"
        |> Button.outlinedButton
    )
    (Menu.new identity
        |> Menu.withItems [ "One", "Two", "Three" ]
        |> Menu.withIcon
            (\i ->
                if i /= "Two" then
                    Just OUI.Icon.check


                else
                    Nothing
            )
    )
    |> OUI.Material.menuButton shared.theme model.menu1State []

alignLeft : MenuButton btnC item msg -> MenuButton btnC item msg

Change the menu alignment to 'left' (default)

alignRight : MenuButton btnC item msg -> MenuButton btnC item msg

Change the menu alignment to 'right'

alignTop : MenuButton btnC item msg -> MenuButton btnC item msg

Change the menu alignment to 'top'

alignBottom : MenuButton btnC item msg -> MenuButton btnC item msg

Change the menu alignment to 'bottom'

withOpenCloseIcons : Icon -> Icon -> MenuButton btnC item msg -> MenuButton btnC item msg

withOpenCloseIcons

State management

Menu + button is a stateful component

type alias State =

{ id : String

, opened : Bool

, highlighted : Int

}

The component state

type Msg item msg

The component message

init : String -> State

Initialise the State. The given id must be unique in the currently displayed components

update : Msg item msg -> State -> ( State, Cmd msg )

Update the state given a message

onOutsideClick : (Msg item msg -> msg) -> State -> Sub msg

Catch clicks outside an opened menu

update internals

If you need to change the update effect into something else than Cmd (say, a Effect, here is everything you need.

type Effect msg

= Loopback msg

Internal update returns Effect instead of Cmd

updateWithoutPerform : Msg item msg -> State -> ( State, Maybe (Effect msg) )

Do the update but returns a Effect instead of a Cmd

The Effect can be converted to a Cmd with performEffect

performEffect : Effect msg -> Cmd msg

Change a Effect into a Cmd

It simply does:

performEffect : Effect msg -> Cmd msg
performEffect (Loopback msg) =
    Task.perform identity <| Task.succeed msg

Internal

getButton : MenuButton btnC item msg -> Button { btnC | hasAction : () } msg

get the button

getMenu : MenuButton btnC item msg -> Menu item msg

get the menu

getMenuAlign : MenuButton btnC item msg -> Align

get the menu alignment

getOnKeyDown : MenuButton btnC item msg -> Key -> msg

get the keydown message

getOnLoseFocus : MenuButton btnC item msg -> msg

get the lose focus message

getOpenCloseIcons : MenuButton btnC item msg -> Maybe ( Icon, Icon )

get the open/close icons

orus-io/elm-orus-ui/1.0.0

OUI.MenuButton

Constructor

State management

update internals

Internal

Modules