polymer

Using external JS libraries in a web component

由 ℡╲_俬逩灬. 提交于 2019-12-12 08:19:41
问题 I am developing a web component using Polymer 2, and would like to make use of a third-party JavaScript library, which was not specifically designed for use with web components. As far as I know, the only way to do this is to include a <script> tag referencing the library, within the HTML file of my web component. I can see a couple of issues with doing this, and want to know if there are any ways around them, and indeed whether including third-party libraries in this way is considered bad

Element transclusion

由 自古美人都是妖i 提交于 2019-12-12 08:17:42
问题 Is there something like angularjs directive's transclude attribute in polymer? Something what allows me to include some elements to a specific place in template? I would like to achieve something like following: <my-header title="My title"> <my-header-item name="Item 1"></my-header-item> <my-header-item name="Item 2"></my-header-item> </my-header> which might be expressed: <h1>My title</h1> <!-- "My title" given by my-header's title attribute --> <ul> <li>Item 1 <!-- given by my-header-item -

How do I import Polymer elements into code playgrounds like plunker (plnkr.co), jsBin and jsFiddle?

由 蹲街弑〆低调 提交于 2019-12-12 07:25:07
问题 Question: In this Plunk, I want to import the Polymer 1.0 elements <paper-button> and <paper-menu> . How do I do that? In other words, what is the proper set of <script> and <link> tags and their respective src and href attributes that will allow my <paper-button> and <paper-menu> elements to properly function? Attempts: In the right margin, there is an option to search and import external libraries. I used that to search for Polymer 1.0 and I imported the following. <script data-require=

How to sort an iron-list in Polymer 1.0?

由 风流意气都作罢 提交于 2019-12-12 07:18:29
问题 I am looking to sort data in an iron-list (and also sort items as they are added into the data array). Sample (unsorted) json data: [ {"name": "Zebra"}, {"name": "Alligator"}, {"name": "Lion"} ] I have tried using the indexAs property to sort an iron-list as follows but the API isn't clear how to use it: <iron-ajax url="./data.json" last-response="{{data}}" auto></iron-ajax> <iron-list items="[[data]]" as="item" index-as="name" class="fit"> <template> <div> Name: <span>[[item.name]]</span> <

Error with polymer build

由 喜夏-厌秋 提交于 2019-12-12 06:35:49
问题 I am triying to learn how to use the new app-toolbox. In local, works fine; but when I use: polymer build I get these errors: C:\Users\Marcos\Documents\poly2>polymer build info: Building application... info: Generating build/unbundled... info: Generating build/bundled... error: Uncaught exception: Error: file path is not in root: C:/Users/Marcos/Documents/poly2/index.html (C:\Users\Marcos\Documents\poly2) error: Error: file path is not in root: C:/Users/Marcos/Documents/poly2/index.html (C:

How to give polymer iron image auto height? [duplicate]

由 时光总嘲笑我的痴心妄想 提交于 2019-12-12 06:05:11
问题 This question already has answers here : Stretch image in iron-image element (4 answers) Closed 4 years ago . Check out this jsbin I want my images have auto height with sizing="contain" , it means they won't have extra space. In my example those extra space are in red. iron image is required to set a fixed height otherwise image not display, I tried height:auto and height:100% but not work. 回答1: I was using paper-material, should use paper-card 来源： https://stackoverflow.com/questions

Only first local DOM element showing with Polymer

由 允我心安 提交于 2019-12-12 05:46:58
问题 I've been toying with Polymer 1.0 a bit and have this basic HTML file: <head> <link rel="import" href="bower_components/polymer/polymer.html"/> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"> </script> </head> <body> <dom-module id="photo-view"> <template> <p>Photo <span>{{basePic}}</span> goes here with filters [<span>{{filters}}</span>]</p> </template> <script> var PhotoView = Polymer({ is: 'photo-view', properties: { basePic: String, filters: { type: Array, value:

How do I update the DOM in polymer 1.x when data is changed?

由 随声附和 提交于 2019-12-12 04:58:47
问题 I am new to Polymer and come from an Angular background where data is shared between components using services. I have two views (form-view and display-view) that I would like to share the data that is "stored" in an object in another element called data-store. Here is the plunker form-view <dom-module id="form-view"> <template> <style> :host { display: inline-block; } </style> <h1>Form View</h1> <label for="form-name">Name</label> <input id="form-name" value="{{formData.name::change}}">

Call function on polymer navigation drawer panel

由 最后都变了- 提交于 2019-12-12 04:58:03
问题 I am stuck. I am playing around with polymer but I do not manage to call the togglePanel function on the drawer panel and my code looks like this: <!DOCTYPE html> <html> <head> <!-- 1. Load platform.js for polyfill support. --> <script src="bower_components/platform/platform.js"></script> <!-- 2. Use an HTML Import to bring in the element. --> <link rel="import" href="bower_components/core-ajax/core-ajax.html"> <link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html

Dynamic search/filter core-list (Polymer 0.5)

由 谁说我不能喝 提交于 2019-12-12 04:55:47
问题 I need to implement a filter-type search which hides items in core list if they do not match the search. I created a .hidden class that is applied to an item if an expression returns false: class = {{ {hidden: !match(model.host, hQuery)} | tokenList }} The elements are hidden, but the list does not reflow elements unless I click on a visible row. Is there a way to force a reflow using a function call? 回答1: After a week of struggling, hiding list items is just not the right way to handle this.
订阅 polymer