How to navigate iron-selector items using arrow keys?
<template is="dom-repeat" items="[[icons]]">
<iron-icon icon="[[item.name]]"/>
</template>
You would need to use a combination of iron-a11y-keys and an array to keep track of what order your iron-selector items are in. iron-a11y-keys will allow to perform a javascript method when a specific key is pressed, then in that method you will need to determine what iron-selector item to transition to.
Related
I have the following nested dom-repeat:
<firebase-query
id="query"
path="[[path]]"
data="{{parentItems}}"
app-name="myApp">
</firebase-query>
<template is="dom-repeat"
items="{{parentItems}}"
as="parentItem">
<template is="dom-repeat" items="{{_toArray(parentItem)}}">
<div>{{item.details}} </div>
</template>
</template>
When items are added/removed from parentItems, the nested child dom-repeat template is not re-rendering i.e. _toArray() is not called. Is this behaviour expected? How do I ensure that when parentItems changes, the nested template will also be updated? Thanks.
I don't have the details of how you add something in the parentItems property, but i assume you do something like this
this.parentItems.push(something)
Polymer won't see the array change in that case, try to use the polymer push instead,
this.push('parentItems', something)
It will push it in the array, and notify polymer binding to update the view.
I have a list of paper-checkbox elements inside a core-selector like this
<core-selector id="moduleSelector" multi="true" valueattr="label" notap?="{{true}}" on-core-select="{{selectionSelect}}>
<template repeat="{{modules in moduleslist}}">
<core-label horizontal layout>
<paper-checkbox id="modulecheckbox" checked="{{modules.checked}}" label="{{modules.pname}}"
on-change={{checkboxHandler}} noink></paper-checkbox>
</core-label>
<br>
</template>
</core-selector>
I wish to get the array of selected paper-checkbox labels using this.$.moduleSelector.selected but i get only some index values which are not accurate as per the module list indexes.I need to get the label names.
If I use paper-items instead of checkboxes like below
<core-selector id="moduleSelector" valueattr="label" multi="true" notap?="{{false}}">
<template repeat="{{modules in moduleslist}}">
<paper-item label="{{modules}}"></paper-item>
</template>
</core-selector>
then I can get the proper array values using this.$.moduleSelector.selected
Any help will be appreciated.
You should switch to Polymer 1.0. Polymer 0.5 is a very old and unsupported version. Polymer 1.0 is also much easier to use.
I have a simple template like this
<template is="dom-repeat" items="[[items]]">
<paper-button active="{{item.selected}}" toggles raised>
<span>[[item.selected]]</span>
</paper-button>
</template>
If I activate the first paper-button in the list by tapping it and then call
this.set('items.0.selected', !this.items[0].selected);
It gets deactivated.
But then if I try the exact steps above again, the button doesn't get deactivated, which makes the button state and the selected value out of sync.
Why is it doing this? The issue can be replicated over here.
Interesting question. So I tried to use a single paper-button binding to a single item instance and it turned out to be working fine, which got me thinking that it might have something to do with path binding inside an array.
So I then added a tap handler to the paper-button and every time it's tapped, do a notifyPath on the selected subproperty path with the value of itself -
this.notifyPath('items.0.selected', this.items[0].selected);
And it works.
I'm trying to scroll a simple core-list with a keyboard key.
This is the core-list:
post-list.html
<core-list data="{{posts}}" selectionEnabled="true" selection="{{selectedPost}}" on-core-select="{{selectedHandler}}" fit >
<template repeat>
<post-card post="{{model}}" index="{{index}}" ></post-card>
</template>
I need to get the index of the selected post-card, increment it and pass it to the selectItem and scrollToItem methods of the core-list.
The problem I'm facing is... how do i get the index?
I searched for an easy way to get the it both in core-list and in core-selection without success.
Unfortunately the core-list attribute "selection" from core-list is the data of the current selected record (so I can't get the index attribute from it).
Am I missing something?
Is there any solution that doesn't involve handling the index directly in the post-card component?
Thanks.
Core-list item is core-selection which handling selection event. You could try to use core-select event which you could get the index of selected item. So it could be like this
selectedHandler: function(e, detail, sender) {
var i=this.$.selection.indexOf(detail.item);
this.scrollToItem(i+1);
}
Code can be found here: https://ele.io/MikeFielden/cw-style-demo-menu
What Im trying to achieve here is to have a left nav component that I can include on many pages with an attribute on the tag selected that I can use to key off of and select the corresponding core-item.
For the life of me I cannot get it working. I guess I'm confused about piercing the shadow DOM from within js? Not really sure what the best approach here is.
There are some issues with your code.
The whole menu template should look like (note the setting of selected attribute on paper-item):
<core-menu id="nav">
<template repeat='{{node in nodes}}'>
<paper-item id="{{node.name | lowercase}}" selected='{{selected == node.name}}'>
{{node.name}}
</paper-item>
</template>
</core-menu>
I did not get why you needed two nested templates, so I simplified things a bit. Now the only thing left to do is to set the selected attribute of your demo menu to the proper name (id is not needed at all, it’s fine comparing items by names):
<cw-style-demo-menu selected="Assets">
Full live preview: http://plnkr.co/edit/E2B94tfAhJXnPZrusjtz?p=preview