当放置在自定义元素中时，Paper-dialog 显示在抽屉面板后面

Question

从自定义元素启动时，纸质对话框显示在抽屉面板后面。

这是来自 polymer-starter-kit 的修改后的 "my-greetings.html" 自定义元素，用于显示对话框：

<dom-module id="my-greeting">
<style>
:host {
  display: block;
}
@media (max-width: 600px) {
  h1.paper-font-display1 {
    font-size: 24px;
  }
}
</style>
<template>
<paper-dialog id="bigDialog">
  <h2>Scrolling</h2>
  <paper-dialog-scrollable>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </paper-dialog-scrollable>
  <div class="buttons">
    <paper-button dialog-dismiss>Cancel</paper-button>
    <paper-button dialog-confirm autofocus>OK</paper-button>
  </div>
</paper-dialog>

<paper-icon-button icon="refresh" on-tap="showDialog">SHOW</paper-icon-button>
</template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: 'my-greeting',

      properties: {
        greeting: {
          type: String,
          value: 'Welcome!',
          notify: true
        }
      },

      showDialog : function(event) {
        var dialog = this.$.bigDialog;
        if (bigDialog) {
          bigDialog.open();
        }
      }

    });
  })();
</script>

如何设置对话框的样式：

在抽屉面板的顶部并居中？
在内容面板中居中？

纸质对话框似乎不是为放置自定义元素而构建的。（尝试添加模态对话框。参考：link）

Answer 1

我不确定您的具体要求是什么，但我能够使用您的对话框元素并将其显示在上方，而不会被面板遮挡，只需将其放置在外部 <paper-drawer-panel>.

这是它的样子：

我不确定这是否是你想要的，但要做到这一点，类似下面的内容说明了一个基本示例：

  <paper-drawer-panel>
  <paper-header-panel drawer>
    <paper-toolbar>
      <div>Drawer</div>
    </paper-toolbar>
    <paper-menu selected="{{_selected}}">
      <paper-item>Item 1</paper-item>
    </paper-menu>
  </paper-header-panel>
  <paper-header-panel mode="standard" main>
    <paper-toolbar>
      <h1>[[_selected]]</h1>
    </paper-toolbar>
    <neon-animated-pages selected="{{_selected}}">
      <paper-button raised on-tap="showDialog">Show Dialog</paper-button>
      <div>Div</div>
    </neon-animated-pages>
  </paper-header-panel>
</paper-drawer-panel>
<my-greeting id="dialog"></my-greeting>

当放置在自定义元素中时，Paper-dialog 显示在抽屉面板后面

Paper-dialog shows up behind drawer-panel when placed in a custom element

polymer

polymer-1.0