mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
5ba348dfd0
BREAKING: `MdMenu.prototype.anchor` now only accepts a string which will querySelector the rootNode of the menu. The method now to anchor to an element reference is to set `MdMenu.prototype.anchorElement`. This matches the `popover` anchoring proposal more closely, but that proposal may not pass in favor of a CSS approach. PiperOrigin-RevId: 560955779
73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import {customElement} from 'lit/decorators.js';
|
|
|
|
import {styles as listItemForcedColorsStyles} from '../list/internal/listitem/forced-colors-styles.css.js';
|
|
import {styles as listItemStyles} from '../list/internal/listitem/list-item-styles.css.js';
|
|
|
|
import {styles as forcedColorsStyles} from './internal/menuitem/forced-colors-styles.css.js';
|
|
import {styles} from './internal/menuitem/menu-item-styles.css.js';
|
|
import {SubMenuItem} from './internal/submenuitem/sub-menu-item.js';
|
|
|
|
export {ListItem} from '../list/internal/listitem/list-item.js';
|
|
export {CloseMenuEvent, MenuItem} from './internal/shared.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'md-sub-menu-item': MdSubMenuItem;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @summary Menus display a list of choices on a temporary surface.
|
|
*
|
|
* @description
|
|
* Menu items are the selectable choices within the menu. Menu items must
|
|
* implement the `MenuItem` interface and also have the `md-menu-item`
|
|
* attribute. Additionally menu items are list items so they must also have the
|
|
* `md-list-item` attribute.
|
|
*
|
|
* Menu items can control a menu by selectively firing the `close-menu` and
|
|
* `deselect-items` events.
|
|
*
|
|
* This menu item will open a sub-menu that is slotted in the `submenu` slot.
|
|
* Additionally, the containing menu must either have `has-overflow` or `fixed`
|
|
* set to `true` in order to display the containing menu properly.
|
|
*
|
|
* @example
|
|
* ```html
|
|
* <div style="position:relative;">
|
|
* <button
|
|
* id="anchor"
|
|
* @click=${() => this.menuRef.value.show()}>
|
|
* Click to open menu
|
|
* </button>
|
|
* <!--
|
|
* `has-overflow` is required when using a submenu which overflows the
|
|
* menu's contents
|
|
* -->
|
|
* <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
|
|
* <md-menu-item header="This is a header"></md-menu-item>
|
|
* <md-sub-menu-item header="this is a submenu item">
|
|
* <md-menu slot="submenu">
|
|
* <md-menu-item
|
|
* header="This is an item inside a submenu"></md-menu-item>
|
|
* </md-menu>
|
|
* </md-sub-menu>
|
|
* </md-menu>
|
|
* </div>
|
|
* ```
|
|
*
|
|
* @final
|
|
* @suppress {visibility}
|
|
*/
|
|
@customElement('md-sub-menu-item')
|
|
export class MdSubMenuItem extends SubMenuItem {
|
|
static override styles =
|
|
[listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];
|
|
}
|