How to use paper-dialog polymer element?

问题

I am using the element by adding opening and closing tags <paper-dialog><p>This is it</p></paper-dialog> but it is not getting shown up. Do I need to add some script on top of it so that it should be triggered on some event? Or is there some another way to make it visible ?

回答1:

The dialog itself is autohidden. You usually toggle it with a button. For example, give the dialog an id="dialog" and make the button on-tap="toggleDialog" , which would be

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

回答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:

For polymer 3.0 I create my paper-dialog to remove an item from a list with a title, description and two buttons.

<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>

and to call this dialog the only thing I do is call it by its id in a function as follows.

this.$.dialogDelete.open()

I hope it helps.

来源：https://stackoverflow.com/questions/27015173/how-to-use-paper-dialog-polymer-element

标签

polymer

material-design