我有以下代码:
<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>
注意到您的定义horizontalOffset="20"
和有效定义之间的区别了horizontal-offset="50"
吗?
尝试将代码更改为
<paper-menu-button
horizontal-align="right"
horizontal-offset="20"
vertical-align="top"
vertical-offset="50">
通过在每个破折号后面使用大写字母,然后删除破折号,将带有破折号的属性名称转换为camelCase属性名称。例如,属性名字映射到名字。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句