Question

我正在使用Polymer Starter Kit。

当我添加<paper-toast>元素时，当<paper-drawer-panel> .show()时，它会显示在<packaging>war</packaging>后面。

有没有其他人遇到过这个问题，您对如何解决这个问题有任何想法吗？

Answer 1

我遇到了同样的问题，并弄清楚发生了什么。

如果您与我做同样的事情，那么您已在paper-toast的{{1}}部分内的某处main获得了paper-drawer-panel。在这种情况下，请将paper-toast移到paper-drawer-panel之外。

对我有用的是在结束paper-toast标记后的index.html中添加</paper-drawer-panel>。

如果您需要使用动态消息（即，消息内容是在index.html上未提供的自定义元素中确定的，那么您可以在自定义元素中设置文本，如下所示。

<强>的index.html

<paper-drawer-panel>
    <!-- Your chest of drawers go here -->
</paper-drawer-panel>

<paper-toast id="somethingWentWrong"
             duration="6000">
</paper-toast>

<强> elsewhere.html

<!-- Assuming of course that this is included in index.html -->
<p on-click="paragraphClicked">Click Me</p>


paragraphClicked: function() {
   var toast = document.querySelector('#somethingWentWrong');
   toast.text = 'Aaargh!';
   toast.show();
}

Answer 2

您可以将纸质吐司的z-index样式设置为合适的值，例如10000.它甚至可以与Web组件中的纸质吐司元素一起使用

聚合物1.0 <纸 - 吐司>出现在<纸抽屉面板>后面

2 个答案: