Wie Papier-Dialogfeld Polymer-Element zu verwenden?

Question

Ich benutze das Element durch Hinzufügen von öffnenden und schließenden Tags <paper-dialog><p>This is it</p></paper-dialog>, aber es wird nicht angezeigt. Muss ich ein Skript hinzufügen, damit es bei einem Ereignis ausgelöst wird? Oder gibt es eine andere Möglichkeit, es sichtbar zu machen?

Answer 1

Der Dialog selbst wird automatisch eingeblendet. Sie schalten es normalerweise mit einer Taste um. Zum Beispiel geben Sie den Dialog ein id="dialog" und machen Sie die Taste on-tap="toggleDialog", die

toggleDialog: function() { 
      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, 
       }, 

 validatedetails: function() { 
        this.$.userdetails.open(); 
      }, 

     }); 
      </script>