如何使用纸质对话聚合物元件？

Question

我通过添加开始和结束标记<paper-dialog><p>This is it</p></paper-dialog>来使用元素，但它没有显示出来。我是否需要在它上面添加一些脚本，以便在某些事件上触发它？或者有其他方法可以让它变得可见？

Answer 1

对话框本身是自动隐藏的。你通常用一个按钮来切换它。例如，为对话框提供一个id="dialog"，并将按钮设置为on-tap="toggleDialog"，如下所示

toggleDialog: () => {
    this.$.dialog.toggle();
},

Answer 2

<base href="https://polygit.org/polymer+polymer+v1.11.2/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="paper-dialog/paper-dialog.html" />
<link rel="import" href="paper-input/paper-input.html" />
<link rel="import" href="paper-button/paper-button.html" />

<!--Here, we use a input field to give input to the dialog box-->  
<paper-input label="Name" id="username" always-float-label allowed-pattern="[a-zA-Z]" value={{username}} required error-message="User Name Required"></paper-input>

   <!--The button is used to submit the values-->

   <paper-button class="green" on-tap="validatedetails">Submit</paper-button>

   <!--Dialog is usually hidden. So by using id we can call the dialog box-->
   <div>
     <paper-dialog id="userdetails">

     <!--This section is used to fetch the input from the input-field and display on the dialog using one-way data binding-->

     <h2>User Information</h2>
       <p>[[username]]</p>

       <div class="buttons">

       <!--This button is used to close the dialog-->


       <paper-button dialog-dismiss style="color: #0B746E" on-tap="cleardata">CLOSE</paper-button>
     </div>
   </paper-dialog>
 </div>

 <script>
   Polymer({
     is: 'paper-dialog',
     properties: {
       username: {
         type: String,
       },

       <!--This function is used to call the dialog-->

       validatedetails: function() {
         this.$.userdetails.open();
       },
      });
  </script>

Answer 3

对于聚合物3.0，我创建了我的paper-dialog来从列表中删除一个带有标题、描述和两个按钮的项目。

<paper-dialog id="dialogDelete" >
    <h2>Delete</h2>
    <p>Are yout sure you want to delete this catalog?.</p>
    <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button dialog-confirm autofocus on-tap="_attempDeleteCatalog">Delete</paper-button>
    </div>
</paper-dialog>

要调用这个对话框，我唯一要做的就是在函数中通过id调用它，如下所示。

this.$.dialogDelete.open()

我希望它能帮上忙。