Polymer 1.0 <paper-toast> 出现在 <paper-drawer-panel> 后面

Question

我正在使用聚合物入门套件。

当我添加一个 <paper-toast> 元素时，当我 .show() 它时，它出现在 <paper-drawer-panel> 后面。

有没有其他人遇到过这个问题，你有什么解决办法吗？

Answer 1

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

如果您正在做与我相同的事情，那么您的 paper-toast 位于 paper-drawer-panel 的 main 部分内的某处。在这种情况下，将 paper-toast 移到 paper-drawer-panel 之外。

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

如果您需要使用动态消息（即，消息内容在 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

您可以将 paper-toast 的 z-index 样式设置为合适的值，例如 10000。它甚至可以在 Web 组件中使用 paper-toast 元素

Polymer 1.0 <paper-toast> 出现在 <paper-drawer-panel> 后面

Polymer 1.0 <paper-toast> appears behind <paper-drawer-panel>

polymer

paper-elements

polymer-1.0