任意点菜单混合

这是港口 铁门行为 与LitElement和ES6类合作,最初由Polymer团队开发.

MenuMixin 财务报告和审定财务报表 MenubarMixin

MenuMixin 财务报告和审定财务报表 MenubarMixin 执行可访问菜单和菜单条混合. 混合剂延伸 MultiSelectableMixin 从 @anypoint-web-components/anypoint-selector 软件包.

使用量

安装

npm install @anypoint-web-components/anypoint-menu-mixin --save

在 LitElement 模板中

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);

然后,在您的 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>

无障碍

混音符设置了"菜单"和"菜单"等执行元素的默认角色. 混音可以用于不同的上下文. 那你可能想把角色换成别的东西 如果新角色要求孩子拥有"aria-set"属性,那么额外设定 useAriaSelected 属性,所以元素将处理选择.

<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>

发展

git clone https://github.com/anypoint-web-components/anypoint-menu-mixin
cd anypoint-menu-mixin
npm install

本地运行演示

npm start

运行测试

npm test