Geek Answers Handbook

How to use paper dialogue polymer element?

I use the element by adding opening and closing tags <paper-dialog><p>This is it</p></paper-dialog> , but it does not appear. Do I need to add a script to it so that it fires on some event? Or is there another way to make it visible?

+7
material-design polymer
source share
2 answers

The dialog itself is automatically hidden. You usually switch it with a button. For example, open the id="dialog" dialog box and make the on-tap="toggleDialog" , which will be

 toggleDialog: function() { this.$.dialog.toggle(); },
+15
source share
  <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>
0
source share

More articles:


All Articles