Patch changes:
Menu.clickableText
Changes from V3:
A togglable menu view and related buttons.
view : ({ isOpen : Basics.Bool, focus : Maybe String } -> msg) -> List (Attribute msg) -> List (Entry msg) -> Html.Styled.Html msg
Menu/pulldown configuration:
focusAndToggle
: the message produced to control the open/closed state and DOM focusattributes
: List of (attributes)[#menu-attributes] to apply to the menu.entries
: the entries of the menuisOpen : Basics.Bool -> Attribute msg
Whether the menu is open
isDisabled : Basics.Bool -> Attribute msg
Whether the menu can be opened
opensOnHover : Basics.Bool -> Attribute msg
Whether the menu will be opened/closed by mouseEnter and mouseLeave interaction. Defaults to False
.
defaultTrigger : String -> List (Nri.Ui.Button.V10.Attribute msg) -> Attribute msg
Use Button with default styles as the triggering element for the Menu.
button : String -> List (Nri.Ui.Button.V10.Attribute msg) -> Attribute msg
Use Button as the triggering element for the Menu.
clickableText : String -> List (Nri.Ui.ClickableText.V4.Attribute msg) -> Attribute msg
Use ClickableText as the triggering element for the Menu.
clickableSvg : String -> Nri.Ui.Svg.V1.Svg -> List (Nri.Ui.ClickableSvg.V2.Attribute msg) -> Attribute msg
Use ClickableSvg as the triggering element for the Menu.
clickableSvgWithoutIndicator : String -> Nri.Ui.Svg.V1.Svg -> List (Nri.Ui.ClickableSvg.V2.Attribute msg) -> Attribute msg
Use ClickableSvg as the triggering element for the Menu without a dropdown indicator
withTooltip : List (Nri.Ui.Tooltip.V3.Attribute msg) -> Attribute msg
Warning: Tooltip keyboard events are not fully supported!
buttonId : String -> Attribute msg
A unique string identifier for the button that opens/closes the menu
navMenuList : Attribute msg
Makes the menu follow the Navigation Menu pattern.
disclosure : { lastId : String } -> Attribute msg
Makes the menu behave as a disclosure.
For more information, please read Disclosure (Show/Hide) pattern.
You will need to pass in the last focusable element in the disclosed content in order for:
dialog : { firstId : String, lastId : String } -> Attribute msg
Makes the menu behave as a dialog.
For more information, please read Dialog pattern.
You will need to pass in the first and last focusable element in the dialog content in order for:
menuWidth : Basics.Int -> Attribute msg
Fix the width of the popover |
menuId : String -> Attribute msg
A unique string identifier for the menu
menuZIndex : Basics.Int -> Attribute msg
The CSS z-index
used to render the menu. Defaults to 1
.
alignLeft : Attribute msg
Align the menu popover on the left side of the triggering button.
alignRight : Attribute msg
Align the menu popover on the right side of the triggering button.
Right (this property) is the default behavior.
containerCss : List Css.Style -> Attribute msg
Adds CSS to the element containing the menu.
menuCss : List Css.Style -> Attribute msg
Adds CSS to the content of the menu. This will style the menu itself.
groupContainerCss : List Css.Style -> Attribute msg
Adds CSS to the element containing the group. This will style items created via Menu.group
entryContainerCss : List Css.Style -> Attribute msg
Adds CSS to the element containing the entry. This will style items created via Menu.entry
groupTitleCss : List Css.Style -> Attribute msg
Adds CSS to the element containing the group title. This will style the title of items created via Menu.group
groupCaptionCss : List Css.Style -> Attribute msg
Adds CSS to the element containing the group caption. This will style the caption of items created via Menu.captionedGroup
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.
captionedGroup : String -> String -> List (Entry msg) -> Entry msg
Represents a group of entries with a named legend and text caption.
entry : String -> (List (Html.Styled.Attribute msg) -> Html.Styled.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 ])