1.1.9 • Published 4 years ago
@anypoint-web-components/anypoint-menu-mixin v1.1.9
anypoint-menu-mixin
This is a port of iron-menu-behavior that works with LitElement and ES6 classes, originally developed by the Polymer team.
MenuMixin and MenubarMixin
MenuMixin and MenubarMixin implement accessible menu and menu bar mixins.
The mixins extends MultiSelectableMixin from @anypoint-web-components/anypoint-selector package.
Usage
Installation
npm install @anypoint-web-components/anypoint-menu-mixin --saveIn a LitElement template
import { LitElement, html } from 'lit-element';
import { MenuMixin } from '@anypoint-web-components/anypoint-menu-mixin';
class SimpleMenu extends MenuMixin(LitElement) {
static get styles() {
return css`
:host > ::slotted(.selected) {
color: white;
background-color: #2196F3;
}
:host > ::slotted([disabled]) {
pointer-events: none;
}`;
}
render() {
return html`<slot></slot>`;
}
}
window.customElements.define('simple-menu', SimpleMenu);Then, in your HTML:
<html>
<head>
<script type="module" src="./simple-menu.js"></script>
<style>
/* Overrides component's internal styling */
simple-menu .selected {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<simple-menu>
<div>Item 0</div>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</simple-menu>
<script>
{
document.querySelector('simple-menu').onselect = (e) => {
console.log(e.detail.value);
};
}
</script>
</body>
</html>Accessibility
The mixin sets default role to the implementing element of "menu" and "menubar". The mixin can be used in different context. Then you may want to change the role to something else. If new role requires children to have "aria-selected" attribute then additionally set useAriaSelected property so the element will handle selection.
<tabs-implementation role="tablist" useariaselected>
<button role="tab">Tab #1</button>
<button role="tab">Tab #2</button>
<button role="tab">Tab #3</button>
</tabs-implementation>Development
git clone https://github.com/anypoint-web-components/anypoint-menu-mixin
cd anypoint-menu-mixin
npm installRunning the demo locally
npm startRunning the tests
npm test