Polymer 1.x：如何定位纸质菜单

Question

问题

How do I position <paper-menu> element relative to <paper-menu-button> (or <paper-button>) that controls it and expand the menu to the left upon dropdown in order to prevent contents from going off screen? (Please provide a working JSFiddle or JSBin example.)

例如，in this JSBin 我如何让 <paper-menu> 索引其相对于控制它的 <paper-menu-button> 的位置？（或者，<paper-button> 也足够了。）

换句话说，无论视口的宽度如何，我都希望菜单始终相对于控制它的按钮的边缘下拉，并在屏幕上向左移动扩展其宽度。（以防止菜单内容流出屏幕或超出视口的右边缘。）什么代码实现了这一点？

代码

http://jsbin.com/xaladokimu/1/edit?html,输出

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz">
  <link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
      paper-menu-button{
        --paper-menu-button-dropdown:{
          max-width: 100%;
          right:70vw;
        };
      }
      paper-item{
        --paper-item:{
          white-space: nowrap;
          width: 100%;
        };
      }
    </style>
        <paper-header-panel class="flex">
            <paper-toolbar>
                <span class="flex"></span>
                <paper-menu-button>
                    <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
                    <paper-menu class="dropdown-content">
                        <paper-item>This is a long label for the paper menu and button to show</paper-item>
                        <paper-item>This is another long label for the paper menu and button</paper-item>
                        <paper-item>This is still yet another long label for the paper menu</paper-item>
                    </paper-menu>
                </paper-menu-button>
            </paper-toolbar>
            <div class="fit">Content goes here...</div>
        </paper-header-panel>       
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

Answer 1

删除 right:70vw; 并将 horizontal-align="right" 添加到您的 paper-menu-button。

看到这个JSBin。

Answer 2

Code from accepted answer.

http://jsbin.com/yadujiqaxi/edit?html,输出,

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz">
  <link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
      paper-menu-button{
        --paper-menu-button-dropdown:{
          max-width: 100%;
        };
      }
      paper-item{
        --paper-item:{
          white-space: nowrap;
          width: 100%;
        };
      }
    </style>
        <paper-header-panel class="flex">
            <paper-toolbar>
                <span class="flex"></span>
                <paper-menu-button horizontal-align="right">
                    <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
                    <paper-menu class="dropdown-content">
                        <paper-item>This is a long label for the paper menu and button to show</paper-item>
                        <paper-item>This is another long label for the paper menu and button</paper-item>
                        <paper-item>This is still yet another long label for the paper menu</paper-item>
                    </paper-menu>
                </paper-menu-button>
            </paper-toolbar>
            <div class="fit">Content goes here...</div>
        </paper-header-panel>       
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

Answer 3

调整垂直偏移和水平偏移。

   <paper-menu-button horizontal-align="left" horizontal-offset="20" vertical-align="top" vertical-offset="60">

Polymer 1.x：如何定位纸质菜单

Polymer 1.x: How to position paper menu

css

polymer

polymer-1.0

paper-elements

问题

代码