paper-elements | 易学教程

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 input" id="middle_name"> </paper-input> <paper-input label="Last" floatinglabel error="Invalid input" id

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). 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 ability to submit to paper-button <polymer-element name="paper-button-submit" extends="button" noscript> <template

Usage of Polymer 1.0 paper-styles Element

阅读更多关于 Usage of Polymer 1.0 paper-styles Element

问题 Unfortunately, I'm finding the current documentation/examples for the usage of paper-styles a bit lacking. I'm not an experienced CSS guy (relative newbie actually), so I could really use examples of how to implement Polymer 1.0 application-wide styling in order to be used by all of it's custom elements (i.e. by applying classes to any tags in those custom element's local DOMs). I did this kind of thing relatively easily in Polymer 0.5 using core-styles, but it has changed enough in 1.0 to

paper-input autocomplete fails to fill

阅读更多关于 paper-input autocomplete fails to fill

Polymer 1.0 Chrome 50.0.2661.102 I am trying to enable chrome autofill with paper input. When selecting either input the standard appropriate chrome autofill prompt list appears, however selecting an available name, or email from the list does not populate the input, it just closes the chrome autofill list. <paper-input id="email" name="email" label="Email" type="email" autocomplete="email" ></paper-input> <paper-input id="password" name="password" label="Password" type="password" autocomplete="current-password" ></paper-input> Try wrapping your inputs in form tags without attributes. Like

Usage of Polymer 1.0 paper-styles Element

阅读更多关于 Usage of Polymer 1.0 paper-styles Element

Unfortunately, I'm finding the current documentation/examples for the usage of paper-styles a bit lacking. I'm not an experienced CSS guy (relative newbie actually), so I could really use examples of how to implement Polymer 1.0 application-wide styling in order to be used by all of it's custom elements (i.e. by applying classes to any tags in those custom element's local DOMs). I did this kind of thing relatively easily in Polymer 0.5 using core-styles, but it has changed enough in 1.0 to confuse me, particularly without full docs/examples to work from. It also seems there may be a few ways

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 editable$="[[editable]]" disabled$="[[disabled]]" value="{{value}}" min="{{min}}" max="{{max}}"></paper

Polymer 1.x: Modal paper-dialog appears behind its backdrop

阅读更多关于 Polymer 1.x: Modal paper-dialog appears behind its backdrop

Does anybody have any advice for fixing the problem of a modal appearing behind its backdrop? So far, I have tried making sure I have all the necessary imports (including <paper-dialog-scrollable> ). I also tried a "hack-fix" ( suggested by someone ) involving setting z-index: auto in the css of paper-header-panel . Neither works. It's worth noting that the <paper-dialog> tag works just fine. Until I add the modal attribute. Any ideas? Similar issues Appearing around the internet are this issue report and this Stackoverflow question . my-element.html <script src="http://www.polymer-project.org

Taking total control of PaperInput validation

阅读更多关于 Taking total control of PaperInput validation

问题 I'm using PaperInput and like the feel. But, is there a way to do the validation using my own logic? For instance, in some cases a pattern match is not enough to determine the error I'd like to display. An example would be I want the PaperInput to specify an item which can only be added once, so the validation would do a lookup in some model map and if input.inputValue is not present it is valid, otherwise invalid. <paper-input floatingLabel id="alias-input" validate="{{aliasIsValid}}" type=

Polymer 1.x: Modal paper-dialog appears behind its backdrop

阅读更多关于 Polymer 1.x: Modal paper-dialog appears behind its backdrop

问题 Does anybody have any advice for fixing the problem of a modal appearing behind its backdrop? So far, I have tried making sure I have all the necessary imports (including <paper-dialog-scrollable> ). I also tried a "hack-fix" (suggested by someone) involving setting z-index: auto in the css of paper-header-panel . Neither works. It's worth noting that the <paper-dialog> tag works just fine. Until I add the modal attribute. Any ideas? Similar issues Appearing around the internet are this issue