polymer-1.0 | 易学教程

Polymer 1.0: Using template dom-repeat inside paper-menu elements to display iron-pages on selection

阅读更多关于 Polymer 1.0: Using template dom-repeat inside paper-menu elements to display iron-pages on selection

问题 Using Polymer 1.0, I have created a paper-drawer-panel layout. In the drawer I have a menu using paper-menu with paper-items which are bound to the iron-pages. I took this example from Content Switcheroo with Core-Pages -- Polycasts #09 and converted it to use the Polymer 1.0 elements. In the code below you can see my commented section in which the paper-items are hard-coded. This works fine. My next step was to try and build my menu dynamically by using the <template is="dom-repeat"> element

Polymer 1.0 - paper-ripple goes all over the screen instead fit in the element

阅读更多关于 Polymer 1.0 - paper-ripple goes all over the screen instead fit in the element

问题 I'm trying to use the ripple effect on a clickable list of items but I'm facing the issue that the ripple effect goes all over the screen when I encapsulate that list into a custom element. It works great if I place it in my index.html but fails when I create a custom element that is included there. See an image of the issue: I've been reading similar questions where the answer is to make the container relative, which should be already done. So I'm wondering if it is required to set any

paper-dialog in Polymer doesn't close in iPhone

阅读更多关于 paper-dialog in Polymer doesn't close in iPhone

问题 I use this example from the doc of polymer <paper-dialog> <h2>Header</h2> <paper-dialog-scrollable> Lorem ipsum... </paper-dialog-scrollable> <div class="buttons"> <paper-button dialog-dismiss>Cancel</paper-button> <paper-button dialog-confirm>Accept</paper-button> </div> </paper-dialog> In every browser the dialog closes when I click on place that is not the dialog, But on iPhone IOS 8.4 it doesn't work. I can't close the dialog. How can I solve this problem? 回答1: I know there is a Z-index

Polymer 1.x: Observers

阅读更多关于 Polymer 1.x: Observers

问题 Ultimately, I want to select individual states from this geochart. But this question is limited to getting the observer labeled _computeData to fire in response to mutating the array of selected states. Reproduce the problem with the following steps: Open this jsBin. Clear the console. Select the state of Texas. Note the console reads: You selected: Colorado,South Dakota,Texas which is expected per this line: console.log('You selected: ' + this.selected); // Logs properly However, I expect

Polymer 1.0 paper-submenu(s) inside paper-menu

阅读更多关于 Polymer 1.0 paper-submenu(s) inside paper-menu

Then I select an item in my outer paper-menu and after that I navigate into my submenu and select an item there, the outer-item is still selected. also conversely: <paper-menu class="list" attr-for-selected="data-route" selected="[[route]]" selectable="a"> <a data-route="one" href="{{baseUrl}}"> <iron-icon icon="home"></iron-icon> <span>one</span> </a> <paper-submenu> <paper-item class="menu-trigger">two</paper-item> <paper-menu class="menu-content"> <a data-route="two-1" href="{{baseUrl}}two-1"> <paper-item> <iron-icon icon="home"></iron-icon> <span>two 1</span> </paper-item> </a> <a data

How to bind paper-toggle-button to a Boolean in Polymer

阅读更多关于 How to bind paper-toggle-button to a Boolean in Polymer

问题 I'm triyng to bind a paper-toggle-button to a boolean but it's not working. I already tried binding with $= and evaluating with ?= . I want to show if the user isActive . <template is="dom-repeat" items={{users}}> <button class="heading" aria-expanded$="[[isExpanded(opened{{index}})]]" aria-controls="collapse{{index}}" onclick="toggle('#collapse{{index}}')" >{{item.firstName}} {{item.lastName}}<paper-toggle-button style="float: right;" checked$="{{item.isActive}}">Activo</paper-toggle-button>

Polymer 1.0 Data binding when object changes

阅读更多关于 Polymer 1.0 Data binding when object changes

问题 I'm having trouble understanding how data-binding works now. On my index page I've got an object (obtained as JSON from a RESTful service), which works just fine when applied to a custom element like: <main-menu class="tiles-container ofvertical flex layout horizontal start" menuitems="{{menuitems}}"> </main-menu> var maintemplate = document.querySelector('#fulltemplate'); maintemplate.menuitems = JSON.parse(data.GetDesktopResult); This works as expected, and when I load my page with

Position app-drawer underneath app-header

阅读更多关于 Position app-drawer underneath app-header

Using the template from starter kit 2, is it possible to have the app drawer below the app-header ? Right now the app drawer starts from the top of viewport and is columnized next to app-header . I would like my app to be like google keep and google cloud console where the app header spans the entire width of the viewport and the app drawer begins underneath. After reading the element catalog for app-layout , I did not see a offical api/attribute to set this. I've tried a few things but no success: <app-drawer-layout fullbleed>  <app-header condenses reveals effects=

Tap listener for polymer iron-list item?

阅读更多关于 Tap listener for polymer iron-list item?

I have a custom element that utilizes iron-list to display an array of objects. Each item is generated via a template as follows: <iron-list id="projectList" items="[[projects]]" indexAs="_id" as="projLI" class="layout flex"> <template> <div> <paper-material id="itemShadow" animated elevation="1"> <div class="item layout horizontal" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)">   </div> </paper-material> </div> </template> </iron-list>

Polymer 1.0 Is there any ready made chart element?

阅读更多关于 Polymer 1.0 Is there any ready made chart element?

I want to add a pie chart in my Polymer 1.0 application. I used chart-elements with Polymer 0.5, but when migrated to 1.0 it stopped working! I did not find anything for 1.0 yet. Does 1.0 at all has a ready made chart element? Seeking for expert help. Thanks in advance. EDIT According to Ben's suggestion I tried with google-chart component and this is what I did. But the chart is not rendering. Step 1: I installed google-chart by using bower install --save GoogleWebComponents/google-chart Step 2: Created a custom element using yo polymer:el custom-pie-chart which looks like this: <dom-module