Novelty Promotes Magicians

    @polymer/iron-menu-behavior

    3.0.2 • Public • Published

    Published on NPM Build status Published on webcomponents.org

    IronMenuBehavior, IronMenubarBehavior

    IronMenuBehavior and IronMenubarBehavior implement accessible menu and menubar behaviors.

    See: Documentation, Demo.

    Usage

    Installation

    npm install --save @polymer/iron-menu-behavior
    

    In a Polymer 3 element

    import {PolymerElement} from '@polymer/polymer/polymer-element.js';
    import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
    import {html} from '@polymer/polymer/lib/utils/html-tag.js';
    
    import {IronMenuBehavior} from '@polymer/iron-menu-behavior/iron-menu-behavior.js';
    
    class SimpleMenu extends mixinBehaviors(IronMenuBehavior, PolymerElement) {
      static get template() {
        return html`
          <style>
            :host > ::slotted(*) {
              display: block;
            }
    
            :host > ::slotted(.iron-selected) {
              color: white;
              background-color: var(--google-blue-500);
            }
          </style>
    
          <slot></slot>
        `;
      }
    }
    
    customElements.define('simple-menu', SimpleMenu);

    Then, in your HTML:

    <script type="module" src="./simple-menu.js"></script>
    
    <style>
    simple-menu .iron-selected {
      background-color: blue;
      color: white;
    }
    </style>
    
    <simple-menu>
      <div role="menuitem">Item 0</div>
      <div role="menuitem">Item 1</div>
      <div role="menuitem" disabled aria-disabled="true">Item 2 (disabled)</div>
    </simple-menu>

    Contributing

    If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

    Installation

    git clone https://github.com/PolymerElements/iron-menu-behavior
    cd iron-menu-behavior
    npm install
    npm install -g polymer-cli

    Running the demo locally

    polymer serve --npm
    open http://127.0.0.1:<port>/demo/

    Running the tests

    polymer test --npm

    Install

    npm i @polymer/iron-menu-behavior

    DownloadsWeekly Downloads

    10,796

    Version

    3.0.2

    License

    BSD-3-Clause

    Unpacked Size

    35.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • aomarks
    • emarquez
    • sorvell
    • bicknellr
    • usergenic
    • polymer-devs
    • azakus
    • kevinpschaaf
    • justinfagnani