Question

使用纸质菜单制作侧边菜单的正确方法是使用左侧图标的项目列表，并且子菜单中也有图标。

<paper-menu>
 <paper-submenu>
  <paper-icon-item> 
   <iron-icon icon="inbox" item-icon></iron-icon> 
   Inbox
  </paper-icon-item>
  <paper-menu class="menu-content">
  <paper-icon-item> 
   <iron-icon icon="inbox" item-icon></iron-icon> 
   Submenu 1
  </paper-icon-item>
  <paper-icon-item> 
   <iron-icon icon="inbox" item-icon></iron-icon> 
   Submenu 2
  </paper-icon-item>
  <paper-icon-item> 
   <iron-icon icon="inbox" item-icon></iron-icon> 
   Submenu 3
  </paper-icon-item>
  </paper-menu>
 </paper-submenu>
 <paper-icon-item> 
  <iron-icon icon="inbox" item-icon></iron-icon> 
  Second menu
 </paper-icon-item>
</paper-menu>

使用Polymer Documentation进行此操作，但它无法正常工作。

Answer 1

在<paper-submenu> docs之后，嵌套菜单通常遵循这种模式，其中每个可扩展子菜单都包含：

paper-item（或同等）的 menu-trigger 类，用作子菜单的标题
{strong> paper-menu 的menu-content，用作子菜单的项目容器

<paper-menu>
  <paper-submenu>
    <paper-item class="menu-trigger">
      Heading 1
    </paper-item>
    <paper-menu class="menu-content">
      ...
    </paper-menu>
  </paper-submenu>
</paper-menu>

您的示例似乎缺少标题项上的menu-trigger课程（即＆＃34;收件箱＆＃34;以及＆＃34;第二个菜单＆＃34;）。

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.2.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-menu/paper-menu.html">
  <link rel="import" href="paper-menu/paper-submenu.html">
  <link rel="import" href="paper-item/paper-icon-item.html">
  <link rel="import" href="iron-icon/iron-icon.html">
  <link rel="import" href="iron-icons/iron-icons.html">
</head>
<body>
  <style>
    .menu-trigger {
      color: blue;
    }
  </style>
  <paper-menu>
    <paper-submenu>
      <paper-icon-item class="menu-trigger">
        <iron-icon icon="inbox" item-icon></iron-icon> 
        Inbox
      </paper-icon-item>
      <paper-menu class="menu-content">
        <paper-icon-item> 
          <iron-icon icon="inbox" item-icon></iron-icon> 
          Submenu 1
        </paper-icon-item>
        <paper-icon-item> 
        <iron-icon icon="inbox" item-icon></iron-icon> 
          Submenu 2
          </paper-icon-item>
        <paper-icon-item> 
          <iron-icon icon="inbox" item-icon></iron-icon> 
          Submenu 3
        </paper-icon-item>
      </paper-menu>
    </paper-submenu>

    <paper-submenu>
      <paper-icon-item class="menu-trigger"> 
        <iron-icon icon="inbox" item-icon></iron-icon> 
        Second menu
      </paper-icon-item>
      <paper-menu class="menu-content">
        <paper-icon-item> 
          <iron-icon icon="inbox" item-icon></iron-icon> 
          Submenu 1
        </paper-icon-item>
        <paper-icon-item> 
        <iron-icon icon="inbox" item-icon></iron-icon> 
          Submenu 2
          </paper-icon-item>
        <paper-icon-item> 
          <iron-icon icon="inbox" item-icon></iron-icon> 
          Submenu 3
        </paper-icon-item>
      </paper-menu>
    </paper-submenu>
  </paper-menu>
</body>

＆＃13;

^jsbin

聚合物使用带图标的子菜单制作侧面菜单的正确方法

1 个答案: