NoRedInk/noredink-ui/14.1.0

NOTE: the latest version is 35.9.3

Nri.Ui.Menu.V3

Changes from V2:

  • Adpoted attribute pattern
  • Added option to customize the z-index

A togglable menu view and related buttons.

https://zpl.io/a75OrE2

view : List (Attribute msg) -> Config msg -> Html msg

Menu/pulldown configuration:

  • attributes: List of (attributes)[#menu-attributes] to apply to the menu.
  • config: Configuration parameters:
    • button: the Button to open the menu
    • entries: the entries of the menu
    • isOpen: whether the menu is currently open or not
    • focusAndToggle: the message produced to control the open/closed state and DOM focus
button : List ButtonAttribute -> String -> Button msg

Defines a standard Button for the menu

custom : (List (Attribute msg) -> Html msg) -> Button msg

Defines a custom Button for the menu

type Attribute msg
type Button msg

Where the menu popover should appear relative to the button

isDisabled : Bool -> Attribute msg

Whether the menu can be openned

buttonId : String -> Attribute msg

A unique string identifier for the button that opens/closes the menu

= Left
| Right

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

Button attributes

Display a particular icon to the left of the title

Determines how we deal with long titles. If not specified it defaults to WrapAndExpandTitle.

Whether the menu button has a border. If not specified it defaults to True.

Fix the width of the button to a number of pixels

= 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?

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 ])