polymer | 易学教程

Stretch image in iron-image element

阅读更多关于 Stretch image in iron-image element

问题 I have an element inside a div : <div style="width:330px;"><iron-image src="image.png"></iron-image></div> . The image is 315px in width and 237px height. I want this image to stretch and make it 330px in width as it the container that is inside of, and the height to be auto to do not break the image ratio. I have tried this : iron-image { width:330px; height:auto; } iron-image img { width:330px; height:auto; } And : <div style="width:330px;"><iron-image src="image.png" style="width:330px

Nested Polymer Components Content Issue

阅读更多关于 Nested Polymer Components Content Issue

foo.html: <link rel="import" href="bar.html"> <dom-module id="p-foo"> <template> <p-bar> <content select=".myContent"></content> </p-bar> </template> <script> Polymer( { is: 'p-foo', } ) </script> </dom-module> bar.html: <dom-module id="p-bar"> <template> bar open <content select=".myContent"></content> bar closed </template> <script> Polymer( { is: 'p-bar', } ) </script> </dom-module> demo.html: <!DOCTYPE html> <html> <head> ... <link rel="import" href="foo.html"> </head> <body> <p-foo><div class="myContent"><strong>hello</strong></div></p-foo> </body> </html> The expected output: bar open

Polymer (1.0) - dynamic use xlink:href$ inside template not working properly

阅读更多关于 Polymer (1.0) - dynamic use xlink:href$ inside template not working properly

问题 i have a custom footer-bar ( tabfooter ) that creates a set of buttons with inline SVG inside of it (for styling reasons its inline). I didnt want to put the complete code for all SVG into the attributes, so i just hand over some ids, which are used by the component to determine the paths on its own. <custom-tabfooter values="{" ids ":["A ","B ","C ","D "]}"></custom-tabfooter> The component then takes the object with the ID array inside and uses it for repeating the DOM elements that are

Light DOM style cascades down to the shadow DOM

阅读更多关于 Light DOM style cascades down to the shadow DOM

问题 I have created a custom element with polymer. When the element is included within an h2 , it inherits the h2 's boldness and font-size . I need my components to be sheltered from the outside world and not be affected by light dom styles. How can I achieve this if the light DOM cascades down? To be more specific, check out the following: 回答1: This appears to be by design: The top-level elements of a shadow tree inherit from their host element. The host element in this case is the h2 . You will

Pushing to data-bound array used in dom-repeat (Polymer)

阅读更多关于 Pushing to data-bound array used in dom-repeat (Polymer)

问题 I have a data-bound array ( dom-repeat ) in a custom Polymer element, and I need to push new data into the array. It's not displaying the items, even though it knows 2 elements have been added. What am I missing here? jsFiddle <link rel="import" href="../../bower_components/polymer/polymer.html"> <dom-module id="main-element"> <template> <ul> <template is="dom-repeat" items="{{people}}"> <li>{{item.first}}</li> </template> </ul> </template> <script> (function() { 'use strict'; Polymer({ is:

Are there ways to display Korean, Japanese or Chinese characters on polymer paper-item?

阅读更多关于 Are there ways to display Korean, Japanese or Chinese characters on polymer paper-item?

问题 I am using polymer to develop my own app. Coz the target user are Asian, i have to use Korean, Japanese or Chinese characters. However, they are not display properly.like this Are there ways to solve this problem? 回答1: You need to specify the encoding in the HTML file of the Polymer element. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> See also I have greek text on a String in Dart using Polymer, why is it displayed wrongly on the browser? 来源： https://stackoverflow.com

Reloading page on every click using Polymer and app-route

阅读更多关于 Reloading page on every click using Polymer and app-route

I am using app-route and iron-pages with a paper-toolbar to display my views. On one of my views, main-view , displays a randomly chosen image which changes each time the page is loaded. Every time main-view is selected from the toolbar, the page should reload so that a new image will be shown. The problem is, if I am already at the /main-view url and I select it from the toolbar it doesn't refresh the page. Is there any way to do this? you should definitely add on-tap to render new images. Your image won't change, because iron-pages are observing some value (specified in selected property) so

confused about the polymer published attributes

阅读更多关于 confused about the polymer published attributes

I have dig to the ajax-core element of polymer, code like the follows works fine: <core-ajax url="./ajax-test.txt" auto response="{{resp}}"></core-ajax> <textarea value="{{resp}}"></textarea> I can get the value from {{resp}} in this case. I have dig into the core-ajax source code and find out how it has been done: make response a published attribute by setting attributes="response ..." pass the ajax response to this.response then I tried to build my own ajax component but it didn't worked, my ajax component code is: Polymer('louis-ajax', { url: '', response: null, ready: function() { xmlhttp

Polymer this.push not working

阅读更多关于 Polymer this.push not working

问题 In Polymer 1.x I am trying to push data from my database to an array, but for whatever reason, it suddenly stopped working. When running this code ready: function(){ var leserbriefRef = firebase.database().ref('leserbriefe'); leserbriefRef.on('value', function(snap) { var n = snap.child('numLeserbriefe').val(); console.log(n); this.lbriefe = []; for(var i=0; i<n; i++){ this.push("lbriefe", snap.child('l'+(n - 1 - i)).val()); } }); } I get this error message: firebase.js:283 Uncaught TypeError

Handling scrolling using iron-scroll-threshold in Polymer 2.0 for scroll-target = document

阅读更多关于 Handling scrolling using iron-scroll-threshold in Polymer 2.0 for scroll-target = document

问题 I am trying to handle scroll threshold events. Using following lines of code <link rel="import" href="../../bower_components/polymer/polymer-element.html"> <link rel="import" href="../../bower_components/iron-scroll-threshold/iron-scroll-threshold.html"> <dom-module id="documentscroll-app"> <template> <style> :host { display: block; } iron-scroll-threshold { display: none; } </style> <h2>Hello [[prop1]]!</h2>  <iron-scroll-threshold id=