纸菜单内的Polymer 1.0纸子菜单 [英] Polymer 1.0 paper-submenu(s) inside paper-menu

问题描述

然后，我在外部纸张菜单中选择一个项目，然后导航到子菜单并在其中选择一个项目，仍然选择外部项目.相反地​​:

Then I select an item in my outer paper-menu and after that I navigate into my submenu and select an item there, the outer-item is still selected. also conversely:

<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]" selectable="a">
 <a data-route="one" href="{{baseUrl}}">
  <iron-icon icon="home"></iron-icon>
  <span>one</span>
 </a>
 <paper-submenu>
  <paper-item class="menu-trigger">two</paper-item>
  <paper-menu class="menu-content">
    <a data-route="two-1" href="{{baseUrl}}two-1">
     <paper-item>
      <iron-icon icon="home"></iron-icon>
      <span>two 1</span>
     </paper-item>
    </a>
    <a data-route="two-2" href="{{baseUrl}}two-2">
     <paper-item> 
      <iron-icon icon="info"></iron-icon>
      <span>two 2</span>
     </paper-item>
    </a>
  </paper-menu>
 </paper-submenu>
 <a data-route="users" href="{{baseUrl}}users">
  <iron-icon icon="info"></iron-icon>
  <span>Users</span>
 </a>

 <a data-route="contact" href="{{baseUrl}}contact">
  <iron-icon icon="mail"></iron-icon>
  <span>Contact</span>
 </a>
</paper-menu>

有什么想法要解决吗?

推荐答案

这可以通过通过点按程序来管理菜单打开的属性来完成:

This can be done by programmatically managing the menu opened property via on-tap:

<dom-module id="menu-nav">
    <template>
        <!-- define route for 'view', e.g. /:view -->
        <!-- define route for 'subview', e.g. /bar/:subview -->

        <paper-menu selected="{{view}}" attr-for-selected="name">
            <paper-item name="foo" on-tap="_onFoo">
                Foo
            </paper-item>

            <paper-submenu opened="{{_isSubmenu(view, _inSubmenu)}}">
                <paper-item on-tap="_onSubmenu" class="menu-trigger">
                    Bar
                </paper-item>

                <paper-menu selected="{{subview}}" attr-for-selected="subname" class="menu-content">
                    <paper-item subname="baz" on-tap="{{_onBar}}">
                        Baz
                    </paper-item>
                <paper-menu>
            </paper-submenu>
        <paper-menu>
    </template>

    <script>
        Polymer({
            is: "menu-nav",

            properties: {
                view: {
                    type: String,
                    value: "foo"
                },

                _inSubmenu: {
                    type: Boolean,
                    value: false
                }
            },

            _isSubmenu: function (view, _inSubmenu) {
                return _inSubmenu || view === 'bar';
            },

            _onFoo: function () {
                this.set('_inSubmenu', false);
                // ... transition to next route, this could depend on the router being used
                // for eample, with Excess router, this would be:
                // Excess.RouteManager.transitionTo('/foo');
            },

            _onBar: function () {
                this.set('_inSubmenu', true);
                this.set('subview', undefined);
                // ... transition to /bar/baz
            },

            _onSubmenu: function (e) {
                e.stopPropagation();
                this._onBar();
            },
        });
    </script>
</dom-module>

相关问题: https://github.com/PolymerElements/paper-menu/issues /42

这篇关于纸菜单内的Polymer 1.0纸子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！