Package Exports

@rmwc/menu
@rmwc/menu/README.md

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rmwc/menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Menus

Menus display a list of choices on a transient sheet of material.

Module @rmwc/menu
Import styles:
- import '@material/menu/dist/mdc.menu.css'
- import '@material/menu-surface/dist/mdc.menu-surface.css'
- import '@material/list/dist/mdc.list.css'
MDC Docs: https://material.io/develop/web/components/menus/

Basic Usage

You can compose a menu with the given components, and manually manage the open state. Menu expects MenuItems as children while MenuSurface is a generic container which can have anything as a child.

function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <MenuSurfaceAnchor>
      <Menu
        open={open}
        onSelect={evt => console.log(evt.detail.index)}
        onClose={evt => setOpen(false)}
      >
        <MenuItem>Cookies</MenuItem>
        <MenuItem>Pizza</MenuItem>
        {/** MenuItem is just a ListItem, so you can intermingle other List components */}
        <ListDivider />
        <MenuItem>Icecream</MenuItem>
      </Menu>

      <Button raised onClick={evt => setOpen(!open)}>
        Menu
      </Button>
    </MenuSurfaceAnchor>
  );
}

function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <MenuSurfaceAnchor>
      <MenuSurface open={open} onClose={evt => setOpen(false)}>
        <div style={{ padding: '1rem', width: '8rem' }}>
          Make the content whatever you want.
        </div>
      </MenuSurface>

      <Button raised onClick={evt => setOpen(!open)}>
        Menu Surface
      </Button>
    </MenuSurfaceAnchor>
  );
}

function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <MenuSurfaceAnchor>
      <MenuSurface open={open} onClose={evt => setOpen(false)}>
        <div style={{ padding: '1rem', width: '8rem' }}>Menu.</div>
      </MenuSurface>
      {/** The handle can be any component you want */}
      <IconButton icon="menu" onClick={evt => setOpen(!open)} />
    </MenuSurfaceAnchor>
  );
}

Simplified usage

RMWC provides a convenience SimpleMenu component that takes a handle as a prop, and manages the open state for you.

<SimpleMenu handle={<Button>Simple Menu</Button>}>
  <MenuItem>Cookies</MenuItem>
  <MenuItem>Pizza</MenuItem>
  <MenuItem>Icecream</MenuItem>
</SimpleMenu>

<SimpleMenuSurface handle={<Button>Simple Menu Surface</Button>}>
  <div style={{ padding: '1rem', width: '8rem' }}>
    Make the content whatever you want.
  </div>
</SimpleMenuSurface>

Anchoring

By default, Menus will attempt to automatically position themselves, but this behavior can be overriden by setting the anchorCorner prop.

function Example() {
  const [anchorCorner, setAnchorCorner] = React.useState(
    'topLeft'
  );

  return (
    <>
      <MenuSurfaceAnchor>
        <MenuSurface anchorCorner={anchorCorner} open={true}>
          <div style={{ padding: '1rem', width: '8rem' }}>
            anchorCorner: {anchorCorner}
          </div>
        </MenuSurface>
        <Button raised label="Anchored Menu" />
      </MenuSurfaceAnchor>

      <Select
        value={anchorCorner}
        label="anchorCorner"
        onChange={evt => setAnchorCorner(evt.currentTarget.value)}
        options={[
          'topLeft',
          'topRight',
          'bottomLeft',
          'bottomRight',
          'topStart',
          'topEnd',
          'bottomStart',
          'bottomEnd'
        ]}
      />
    </>
  );
}

Props

Name	Type	Description
`anchorCorner`	`AnchorT`	Manually position the menu to one of the corners.
`children`	`React.ReactNode`	Children to render.
`fixed`	`undefined	false
`hoistToBody`	`undefined	false
`onClose`	`undefined	(evt: RMWC.CustomEventT<{}>) => void`
`onOpen`	`undefined	(evt: RMWC.CustomEventT<{}>) => void`
`onSelect`	`undefined	(evt: RMWC.CustomEventT<>) => void`
`open`	`undefined	false

MenuItem

MenuSurfaceAnchor

SimpleMenu

Simple Menu

Props

Name	Type	Description
`anchorCorner`	`AnchorT`	Manually position the menu to one of the corners.
`children`	`React.ReactNode`	Children to render
`fixed`	`undefined	false
`handle`	`ReactElement<any>`	An element that will open the menu when clicked
`hoistToBody`	`undefined	false
`onClose`	`undefined	(evt: RMWC.CustomEventT<{}>) => void`
`onOpen`	`undefined	(evt: RMWC.CustomEventT<{}>) => void`
`onSelect`	`undefined	(evt: RMWC.CustomEventT<>) => void`
`open`	`undefined	false
`rootProps`	`Object`	By default, props spread to the Menu component. These will spread to the MenuSurfaceAnchor which is useful for things like overall positioning of the anchor.

SimpleMenu

Simple Menu

Props

Name	Type	Description
`anchorCorner`	`AnchorT`	Manually position the menu to one of the corners.
`children`	`React.ReactNode`	Children to render
`fixed`	`undefined	false
`handle`	`ReactElement<any>`	An element that will open the menu when clicked
`hoistToBody`	`undefined	false
`onClose`	`undefined	(evt: RMWC.CustomEventT<{}>) => void`
`onOpen`	`undefined	(evt: RMWC.CustomEventT<{}>) => void`
`onSelect`	`undefined	(evt: RMWC.CustomEventT<>) => void`
`open`	`undefined	false
`rootProps`	`Object`	By default, props spread to the Menu component. These will spread to the MenuSurfaceAnchor which is useful for things like overall positioning of the anchor.