paper-elements | 易学教程

paper-ripple mouseDown event handler downAction Override

阅读更多关于 paper-ripple mouseDown event handler downAction Override

问题 Polymer 1.1 In paper ripple source code they have the mouseDown event handler: /** @param {Event=} event */ downAction: function(event) { var xCenter = this.containerMetrics.width / 2; var yCenter = this.containerMetrics.height / 2; In documentation it states: paper-ripple listens to "mousedown" and "mouseup" events so it would display ripple effect when touches on it. You can also defeat the default behavior and manually route the down and up actions to the ripple element However, in my

Styling Polymer paper-slider

阅读更多关于 Styling Polymer paper-slider

问题 So I'm essentially wrapping the standard paper-slider element with a custom element, and wanting to include some styling. Below is what I currently have: <dom-module id="my-slider"> <template> <style> /* Works */ paper-slider { --paper-slider-active-color: red; --paper-slider-knob-color: red; --paper-slider-height: 3px; } /* Doesn't work */ paper-slider #sliderContainer.paper-slider { margin-left: 0; } /* Also doesn't work */ .slider-input { width: 100px; } </style> <div> <paper-slider

Polymer paper-dropdown-menu not working

阅读更多关于 Polymer paper-dropdown-menu not working

问题 Paper-dropdown-menu component seems to be working fine on the polymer website [ https://www.polymer-project.org/components/paper-dropdown-menu/demo.html ]. However, I downloaded polymer/web components 0.5.1 and the menu doesn't seem to render at all [on any browser]. [ http://idineth.com/garage-website/bower_components/paper-dropdown-menu/demo.html ] Any idea why this is the case? Polymer website seems to be using the same branch if I'm not mistaken. 回答1: Try adding these imports. <link rel=

How to trigger Polymer paper ripple animation by API code?

阅读更多关于 How to trigger Polymer paper ripple animation by API code?

问题 I tried $.find("paper-ripple").animate(); described at https://elements.polymer-project.org/elements/paper-ripple but this does not work. 回答1: You can use simulatedRipple() method of paper-ripple. <!DOCTYPE html> <html> <head> <base href="https://polygit.org"> <script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="/components/polymer/polymer.html"> <link rel="import" href="/components/paper-ripple/paper-ripple.html"> <style> .card { position:

paper-radio-button ripple persist after selection change

阅读更多关于 paper-radio-button ripple persist after selection change

问题 Given a paper-radio-group as shown below <paper-radio-group id="sex-group" selected='1'> <paper-radio-button label='Male'></paper-radio-button><br> <paper-radio-button label='Female'></paper-radio-button> </paper-radio-group> When the Male button is selected followed by the Female button or vice versa, inconsistently the ripple remains on the last selected button even though the selection changes. It occurs in a unpredictable manner with no stack trace. In the graphic above, Female was

material Design with Angular Dart and Polymer dart. Compilation issues

阅读更多关于 material Design with Angular Dart and Polymer dart. Compilation issues

问题 I am at my whits end here. I've been trying over the last 48 hours to get these technologies to work.I've read everywhere that they should be able to work but it's just one problem after the other. I've tried various combinations of my pubspeck.yaml file but the results I get are either the code simply wont build, or it just doesn't work >.> I'll appreciate any help I can get! my pubspeck.yaml: name: blah dependencies: angular: 0.12.0 angular_node_bind: any shadow_dom: any browser: any

Polymer 1.x: paper-dialog modal appears behind app-header-layout

阅读更多关于 Polymer 1.x: paper-dialog modal appears behind app-header-layout

问题 I want to put a sub-element (child) inside an app-header-layout . The sub-element contains a paper-dialog modal . When I open the modal I expect to see the dialog box appear in front of the backdrop. Instead, the dialog appears behind the backdrop. How do I get the modal dialog to appear in front of the backdrop? Or is this perhaps a newly discovered bug in the app-drawer-layout or app-header-layout elements? Here is the plunk. ... http://plnkr.co/edit/ZjPHGqkt8vvDbFdF4CNn?p=preview index

Instance of Paper elements in dart

阅读更多关于 Instance of Paper elements in dart

问题 How can I get an instance to the paper-input element below? HTML file: <!DOCTYPE html> <html> <head>  <script src='packages/web_components/dart_support.js'></script> <link rel='import' href='packages/paper_elements/paper_input.html'> <script src='packages/browser/dart.js'></script> </head> <body fullbleed unresolved> <paper-input id='subject' label='subject'></paper-input> <script

Databinding of polymer paper_input does not work

阅读更多关于 Databinding of polymer paper_input does not work

问题 I have the following code where a 2-way binding is expected between first_name and the property val. <!DOCTYPE html> <link rel="import" href="packages/polymer/polymer.html"> <link rel="import" href="packages/paper_elements/paper_input.html" > <polymer-element name='paper-input-snippet'> <template> <div on-mouseout="{{zoom}}"> <paper-input label="First" floatinglabel error="Invalid input" id="first_name" value='{{val}}'> </paper-input> <paper-input label="Middle" floatinglabel error="Invalid

paper-button with type=“submit” within form doesn't submit?

阅读更多关于 paper-button with type=“submit” within form doesn't submit?

问题 I am trying to use paper-button with type attribute set to submit (as one would do with button element) to submit the enclosing form , but for some reason it is unable to submit the form. Is this a bug or feature? How to make paper-button submit the form? PS: I am in dart land (not js). 回答1: As noticed by Gunter, you can create a custom element which extends some of native element with your desired semantics. I encountered with your issue too and I've created simple element which gives