googlearchive / paper-menu

A Material Design menu
https://www.webcomponents.org/element/PolymerElements/paper-menu
27 stars 48 forks source link

Menu-trigger and two elements inside <paper-item> for submenu #104

Open kolotovStrateg opened 8 years ago

kolotovStrateg commented 8 years ago

Description of problem

I have problem with paper-submenu that I use with Angular 2. I have two elements inside paper-item tag with menu-trigger class, i need different events for this elements: clicking on a first element (icon) it will open submenu, clicking on a second element (link) menu-trigger will not work and will do another action. How can I do that (css-tricks, js, anything)? Thanks.

  <paper-menu>
    <paper-submenu>
      <!--Problem starts here-->
      <paper-item class="menu-trigger">
        <i class="material-icons">&#xE2C7;</i>
        <a (click)="someAction()">Test 1</a>
      </paper-item>
      <!--And finishs here-->
      <paper-menu class="menu-content sublist">
        <paper-submenu>
          <paper-item class="menu-trigger">
            <i class="material-icons ">&#xE313;</i>
            <a>Test 1.1</a>
          </paper-item>
          <paper-menu class="menu-content sublist2">
            <paper-item>
              <a>Test 1.1.1</a>
            </paper-item>
            <paper-item>
              <a>Test 1.1.2</a>
            </paper-item>
          </paper-menu>
        </paper-submenu>
        <paper-item>
           <a>Test 1.2</a>
        </paper-item>
        <paper-item>
           <a>Test 1.3</a>
        </paper-item>
      </paper-menu>
    </paper-submenu>
  </paper-menu>