定製元素基於父頁面的聚合物對話框大小/位置

Question

我剛開始玩聚合物對話框。我嘗試創建一個自定義元素聚合物對話框並將其用在紙卡中。但是，由於對話框基於紙卡的大小/位置而不是整頁來顯示，所以我遇到了問題。

我可以知道我應該如何設計它，以便對話框大小/位置將基於主頁而不是卡？謝謝。

Main page, paper-card is a 100x100px card: 
 
<paper-card> 
 
Text 
 
<my-custom-dialog></my-custom-dialog> 
 
</paper-card> 
 

 
My-custom-dialog: 
 
<dom-module id="my-custom-dialog"> 
 

 

 
    <style is="custom-style"> 
 

 
     paper-dialog { 
 
      position: absolute; 
 
      top: 3%; 
 
      left: 0px; 
 
      margin-top: 0px; 
 
      width: 100%; 
 
      height: 100%; 
 
      overflow: auto; 
 
      z-index: 1; 
 
     } 
 
     
 
     .fa-times { 
 
      cursor: pointer 
 
     } 
 
    </style> 
 

 

 
    <template> 
 

 
     <i class="fa fa-object-group" aria-hidden="true" on-tap="toggleDialog"></i> 
 

 
     <paper-dialog id="dialog" always-ontop entry-animation="scale-up-animation" exit-animation="fade-out-animation"> 
 
      <div class="buttons"> 
 
       <i class="fa fa-times" aria-hidden="true" dialog-confirm></i> 
 
      </div> 
 

 
      <strong>Text here</strong> 
 
      
 
      
 
     </paper-dialog> 
 

 
    </template> 
 

 
</dom-module> 
 

 
<script> 
 
    Polymer({ 
 
     is: "my-custom-dialog", 
 
     toggleDialog: function() { 
 
      this.$.dialog.toggle(); 
 
     }, 
 

 
    }) 
 
</script>

Answer 1

BartKoppelmans是正確的。紙質對話框需要位於紙卡之外。你仍然可以保持卡內的按鈕。

<template> 
    <paper-card style="width: 50%;"> 
    <i class="fa fa-object-group" aria-hidden="true" on-tap="toggleDialog">?</i> 
    </paper-card> 
    <paper-dialog id="dialog" always-ontop auto-fit-on-attach entry-animation="scale-up-animation" exit-animation="fade-out-animation"> 
     <div class="buttons"> 
      <i class="fa fa-times" aria-hidden="true" dialog-confirm></i> 
     </div> 
     <strong>Text here</strong> 
    </paper-dialog> 

</template>