aforemny/material-components-web-elm/6.0.0

NOTE: the latest version is 9.1.0

Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/aforemny/material-components-web-elm.

What we checked: Tag 6.0.0 is still on github.com/aforemny/material-components-web-elm; its commit fa5f16f0eddc is from 2020-10-08 13:01 UTC, before the version was published (2020-10-08 13:03 UTC); every file Elm uses matches a copy in a Lamdera package cache from 2021-02-13, from before the change; elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/aforemny/material-components-web-elm/zipball/6.0.0/

Material.Menu

A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Table of Contents

Resources

Basic usage

A menu is usually tied to an element that opens it, such as a button. For positioning, wrap the button and the menu within an element that sets the surfaceAnchor attribute. The menu's items are simply a list.

import Material.Button as Button
import Material.List as List
import Material.ListItem as ListItem
import Material.Menu as Menu


type Msg
    = MenuOpened
    | MenuClosed


main =
    Html.div [ Menu.surfaceAnchor ]
        [ Button.text
            (Button.config |> Button.setOnClick MenuOpened)
            "Open menu"
        , Menu.menu
            (Menu.config
                |> Menu.setOpen True
                |> Menu.setOnClose MenuClosed
            )
            [ List.list
                (List.config |> List.setWrapFocus True)
                (ListItem.listItem ListItem.config
                    [ text "Menu item" ]
                )
                [ ListItem.listItem ListItem.config
                    [ text "Menu item" ]
                ]
            ]
        ]

Configuration

type Config msg

Configuration of a menu

Default configuration of a menu

Configuration Options

setOnClose : msg -> Config msg -> Config msg

Specify a message when the user closes the menu

setOpen : Bool -> Config msg -> Config msg

Specify whether a menu is open

setQuickOpen : Bool -> Config msg -> Config msg

Specify whether a menu is opening quickly

A quickly opening menu opens without showing an animation.

setAttributes : List (Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Menu

surfaceAnchor : Attribute msg

Menu surface anchor attribute

Use this on a HTML element that contains both the triggering element and the menu itself.

Quick-opening menu

A menu may not show a transition when opening by setting its setQuickOpen configuration option to True.

Menu.menu (Menu.config |> Menu.setQuickOpen True) []