polymer | 易学教程

Polymer, issue with binding array to paper slider value

阅读更多关于 Polymer, issue with binding array to paper slider value

问题 Here is example of the issue: Plunk The initial value, 31, is not binding when changing the slider. Array value 31 is seated on the initiation, but can not be reseated after change. How to properly bind slider to the array? <base href="http://polygit.org/polymer+:master/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link href="polymer/polymer.html" rel="import"> <link href="paper-input/paper-input.html" rel="import"> <link href="paper-slider/paper-slider.html

Uglify/minify Polymer web components using gulp

阅读更多关于 Uglify/minify Polymer web components using gulp

问题 I am trying to minify my web components using gulp's uglify plugin but it fails because it does not recognize the custom html tags. Are there any gulp plugins that can minify html containing custom tags? 回答1: To do this is quite the challenge. You use the crisper plugin to factor out the script into it's own file. You can then minify the script source. Afterwards use vulcanize to inline your script back into the HTML. 回答2: Try out gulp-htmlmin. I use it to minify my elements.html file after

@media don't work properly with polymer custom css

阅读更多关于 @media don't work properly with polymer custom css

问题 I have 2 inputs and I want to make font-size appear small on small screens and big on normal screens but when I use custom css(ie --paper-input-container-label) @media seems not to work properly, testing code below on small screens (height < 320) use css inside of min-height: 480px @media instead max-height: 320px HTML <paper-input-container> <label>E-mail</label> <input is="iron-input"> </paper-input-container> <paper-input-container> <label>Password</label> <input is="iron-input" type=

Polymer events from distant nodes

阅读更多关于 Polymer events from distant nodes

问题 I'm trying to get familiar with polymer, and have been working my way through trying to build a sample application with it. Following the tutorials at https://www.dartlang.org/docs/tutorials/polymer-intro and reading other StackOverflow questions such as How do I fire a custom event from Polymer Dart? I have managed to build two elements where one element fires an event that is acted upon by the second element. I have, however, only been able to figure out how to do this for cases where the

Sharing changes to data between Polymer elements

阅读更多关于 Sharing changes to data between Polymer elements

问题 I have a page where I want to include three separate views (one showing all the data and ones with different summaries) on the same set of data. I'm looking for a way to represent each view as a Polymer element and have each one update whenever the data changes. These changes will be to the values of properties of objects which are stored in an array. It is the array that is shared between the components. I've found an approach that works by firing an event when there is a change to the data,

How to add content to Polymer SPA example

阅读更多关于 How to add content to Polymer SPA example

问题 regarding to that article https://www.polymer-project.org/0.5/articles/spa.html i want to know how to add some content? i know there is an example which loads external html files. but how to add my own content in the other examples? Thank you kind regards Viktoria 回答1: on the page you linked there is a section headed "then drop in your content:" then it is followed with this code. <div layout horizontal center-center fit> <core-animated-pages selected="0" transitions="slide-from-right">

Polymer get element by id from shadow root

阅读更多关于 Polymer get element by id from shadow root

问题 I am not able to get an element by id that is in the shadow root. It will return nil. Here is the code. It is written in clojurescript. (p/defpolymer :query-component {:imports ["components/polymer/polymer.html"] :style ".query-container {margin: 20px; display: inline-block;}" :template [[:div.query-container [:div [:h4 {:style "display: inline-block;"} "Current Query"] [:button {:style "float: right; margin-top: 10px;" :on-click "{{runQuery}}"} "Run Query"]] [:span "{{query.name}}"] [:div

Setting the height of core-pages elements?

阅读更多关于 Setting the height of core-pages elements?

问题 I'm having a lot of trouble getting a core-pages element to have a non-zero height within my custom element. What is the best practice for having the core-pages height be the same as its selected content. Here's a trivial example which clearly breaks: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Polymer</title> </head> <body> <script src="http://www.polymer-project.org/platform.js"></script> <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html

How i use web-components in MeteorJS?

阅读更多关于 How i use web-components in MeteorJS?

问题 I am coding in MeteorJS & using Google's Polymer as frontend framework, Polymer web-component syntax contains <template> tag <dom-module> <template>  </template> </dom-module> MeteorJS not allowing to write <template> tag inside <dom-module> & shows error While processing files with templating (for target web.browser): client/test.html:1: Expected one of: <body>, <head>, <template> How i solve this ? 回答1: The following works for me. Put all Polymer related files inside the

paper-input: Suggest values in typeahead

阅读更多关于 paper-input: Suggest values in typeahead

问题 Is there an easy way to implement a typeahead using Polymer's <paper-input> element? The HTML <datalist> tag seems to implement that for normal <input> tags and I could dynamically update the data list using templates. However, this does nothing: <paper-input label="Topic" list="dl"> </paper-input> <datalist id="dl"> <option>a</option> <option>aa</option> <option>aaa</option> <option>ab</option> </datalist> 回答1: Besides the fact you misuse options, <datalist id="dl"> <option value='a'><