如何使用纸对白聚合物元素？答案

【问题标题】：How to use paper-dialog polymer element?如何使用纸对白聚合物元素？
【发布时间】：2014-11-19 11:00:12
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

那行得通。此外，通过在创建元素时添加“opened”属性也可以解决问题。
很好，不知道。

【解决方案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>

【讨论】：

回答一些解释是一个更好的选择。

【解决方案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()

希望对你有帮助。

【讨论】：