Come utilizzare l'elemento polimerico del dialogo carta?

Question

Sto utilizzando l'elemento aggiungendo i tag di apertura e chiusura <paper-dialog><p>This is it</p></paper-dialog> ma non viene visualizzato. Devo aggiungere qualche script su di esso in modo che possa essere attivato su qualche evento? O c'è un altro modo per renderlo visibile?

Answer 1

La finestra di dialogo è auto nascosta. Di solito lo si attiva con un pulsante. Per esempio, dare la finestra di un id="dialog" e rendere il pulsante on-tap="toggleDialog", che sarebbe

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>