PackagesReroutesAboutlamdera.com

NoRedInk/noredink-ui/13.1.0

NOTE: the latest version is 35.9.3

READMEAboutVersionsSourceModules

Nri.Ui.Menu.V2

Changes from V1:

  • Improves keyboard support
  • replaces onToggle with focusAndToggle
  • remove iconButton and iconLink (use ClickableSvg instead)
  • replace iconButtonWithMenu helper with a custom helper
  • explicitly pass in a buttonId and a menuId (instead of the container id)
  • when wrapping the menu title, use the title in the description rather than an HTML id string
  • separate out the data for the viewCustom menu and the data used to make a nice looking shared default button
  • remove None
  • change the Single API to allow passing-in of the id and passing-back of the menu item attributes

A togglable menu view and related buttons.

https://zpl.io/a75OrE2

{ entries : List (Entry msg)
, isOpen : Bool
, focusAndToggle :
{ isOpen : Bool
, focus : Maybe String
}
-> msg
, alignment : Alignment
, isDisabled : Bool
, menuWidth : Maybe Int
, buttonId : String
, menuId : String
}
-> { icon : Maybe Svg
, title : String
, wrapping : TitleWrapping
, hasBorder : Bool
, buttonWidth : Maybe Int
}
-> Html msg

Menu/pulldown configuration:

  • entries: the entries of the menu
  • focusAndToggle: the message produced to control the open/closed state and DOM focus
  • alignment: where the menu popover should appear relative to the button
  • isDisabled: whether the menu can be openned
  • menuWidth : optionally fix the width of the popover
  • buttonId: a unique string identifier for the button that opens/closes the menu
  • menuId: a unique string identifier for the menu

Button configuration:

  • icon: display a particular icon to the left of the title
  • title: the text to display in the menu button
  • wrapping: WrapAndExpandTitle | TruncateTitle
  • hasBorder: whether the menu button has a border
  • buttonWidth: optionally fix the width of the button to a number of pixels
= Left
| Right

Whether the menu content sticks to the left or right side of the button

= WrapAndExpandTitle
| TruncateTitle

Determines how we deal with long titles. Should we make the menu expand in height to show the full title or truncate it instead?

{ entries : List (Entry msg)
, isOpen : Bool
, focusAndToggle :
{ isOpen : Bool
, focus : Maybe String
}
-> msg
, alignment : Alignment
, isDisabled : Bool
, menuWidth : Maybe Int
, buttonId : String
, menuId : String
}
-> (List (Attribute msg) -> Html msg)
-> Html msg
  • entries: the entries of the menu
  • focusAndToggle: the message produced to control the open/closed state and DOM focus
  • alignment: where the menu popover should appear relative to the button
  • isDisabled: whether the menu can be openned
  • menuWidth : optionally fix the width of the popover
  • buttonId: a unique string identifier for the button that opens/closes the menu
  • menuId: a unique string identifier for the menu

Menu content

type Entry msg

Represents zero or more entries within the menu content

group : String -> List (Entry msg) -> Entry msg

Represents a group of entries with a named legend.

entry : String -> (List (Attribute msg) -> Html msg) -> Entry msg

Represents a single focusable entry.

Pass in the id you'd like for your menu item, which will be used to manage the focus.

Menu.entry "my-button-id"
    (\attributes -> Button.button "One great button" [ Button.custom attributes ])

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera