NoRedInk/noredink-ui/16.3.0

NOTE: the latest version is 35.9.3

Nri.Ui.Menu.V1

A togglable menu view and related buttons.

https://zpl.io/a75OrE2

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

Configure the menu

  • icon: display a particular icon to the left of the title
  • entries: the entries of the menu
  • title: the text to display in the menu button
  • onToggle: a message to trigger when then menu wants to invert its open state
  • hasBorder: whether the menu button has a border
  • alignment: where the menu popover should appear relative to the button
  • isDisabled: whether the menu can be openned
  • buttonWidth: optionally fix the width of the button to a number of pixels
  • menuWidth : optionally fix the width of the popover
  • id: a unique string id for the menu elements
= 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?

{ icon : Svg
, label : String
, isTooltipOpen : Bool
, onShowTooltip : Bool -> msg
, onClick : msg
, isDisabled : Bool
, id : String
}
-> Html msg

Display an icon button consistent with menu button.

{ icon : Svg
, label : String
, isTooltipOpen : Bool
, onShowTooltip : Bool -> msg
, entries : List (Entry msg)
, isOpen : Bool
, onToggle : Bool -> msg
, alignment : Alignment
, isDisabled : Bool
, menuWidth : Maybe Int
, id : String
}
-> Html msg

Configure the icon button & menu

  • icon: the icon that will be used in the iconButton
  • label: the text to display in the tooltip
  • isTooltipOpen: whether the tooltip is open when hovering over the icon
  • onShowTooltip: the message for toggling the tooltip
  • entries: the entries of the menu
  • isOpen: whether the menu is opened
  • onToggle: a message to trigger when then menu wants to invert its open state
  • alignment: where the menu popover should appear relative to the button
  • isDisabled: whether the menu can be openned
  • id: a unique string id for the menu elements
  • menuWidth : optionally fix the width of the popover
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

none : Entry msg

Represents no entries. Useful for conditionals

entry : Html msg -> Entry msg

Represents a single entry