Polymer 1.0 纸菜单按钮 horizo​​ntalAlign 和 horizo​​ntalOffset 不起作用

Question

我有以下代码：

<paper-toolbar id="mainToolbar">
    <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
    <div class="app-name">Dashbord</div>
    <span class="flex"></span>
    <paper-menu-button horizontalAlign="right" horizontalOffset="20" verticalAlign="top" verticalOffset="50">
        <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
        <paper-menu class="dropdown-content">
            <paper-item>Share</paper-item>
            <paper-item>Settings</paper-item>
            <paper-item>Help</paper-item>
        </paper-menu>
   </paper-menu-button>
</paper-toolbar>

菜单按钮按预期工作，但下拉 horizontalAlign 和 horizontalOffset 属性没有生效。

让下拉菜单起作用的唯一方法是对元素定义中的值进行硬编码：

<iron-dropdown
  id="dropdown"
  opened="{{opened}}"
  horizontal-align="right"
  vertical-align="top"
  horizontal-offset="50"
  vertical-offset="20"
  open-animation-config="[[openAnimationConfig]]"
  close-animation-config="[[closeAnimationConfig]]"
  no-animations="[[noAnimations]]"
  focus-target="[[_dropdownContent]]">
  <paper-material class="dropdown-content">
    <content id="content" select=".dropdown-content"></content>
  </paper-material>
</iron-dropdown> 

Answer 1

注意到您的定义 horizontalOffset="20" 和工作定义 horizontal-offset="50" 之间的区别了吗？

尝试将您的代码更改为

<paper-menu-button
    horizontal-align="right"
    horizontal-offset="20"
    vertical-align="top"
    vertical-offset="50">

See property name to attribute name mapping.

Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. For example, the attribute first-name maps to firstName.