I have this paper-dropdown-menu with one button:
<paper-dropdown-menu id="Default" label="My items">
<paper-menu id="DefaultDropDown" attr-for-selected="value" selected="{{selection}}" class="dropdown-content">
<paper-item value="5">Item 1</paper-item>
<paper-item value="6">Item 2</paper-item>
<paper-item value="7">Item 3</paper-item>
</paper-menu>
</paper-dropdown-menu>
<button onclick="clickEvent();">Click</button>
<script>
function clickEvent() {
$('#Default').selectedItem = -1;
}
</script>
I want in the event "clickEvent" you can set selection dropdown-menu to -1: noT selected item.
Any idea how?
The code I put javascript is only to illustrate the idea
The '#' here is redundant because $(...) only supports id anyway:
$('#Default').s...
The selection is maintained by the child component (<paper-menu>) in your case not the <paper-dropdown-menu> itself.
$('DefaultDropDown').selectIndex(-1);
I couldn't figure out from the docs whether deselecting is actually supported when multi is not set.
Related
In a paper-input I have a "Clear Button":
<paper-input
id="myinput" maxlength="10" char-counter label="myinput"
always-float-label required>
<paper-icon-button suffix
onclick="clearInput('InputClientes')"
icon="clear"
class="iconClear"
alt="clear"
title="clear">
</paper-icon-button>
</paper-input>
It is possible to add a similar button (Clear Button) to a paper-dropdown-menu to clear the selection?.
Thanks.
1. If you use a paper-dropdown-button with a paper-listbox inside, you can call its selected property to null to clear the current value.
2. Add a button that will call this method and style it with a position:relative CSS rule to position it at the right place.
3. Listen for the iron-select event to show the [close] button when an item is selected in the list.
<paper-dropdown-menu id=PDM label="Your favourite pastry">
<paper-listbox id=PL class="dropdown-content">
<paper-item>Croissant</paper-item>
<paper-item>Donut</paper-item>
<paper-item>Financier</paper-item>
<paper-item>Madeleine</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<paper-icon-button id=CloseBtn icon="clear" onclick="clearInput()" hidden ></paper-icon-button>
<script>
function clearInput() {
PL.selected = null
CloseBtn.hidden = true
}
PDM.addEventListener( 'iron-select', function ( ev ) {
CloseBtn.hidden = false
} )
</script>
I have a dom-repeat template and I want to be able to sort the list real time. So, the way I went about it is the way below. However, I need a way to refresh that dom-repeat when a user selects a new selection from paper-menu.
Typically, a modification to the result set array would do it. But in this case, a change in sorting the list doesn't require adding or removing anything in that array set(therefore no array mutation).
How could I get <template is="dom-repeat" items="[[pic.results173]]" as="url" sort="_sortList"> to refresh?
<paper-menu-button>
<paper-button class="dropdown-trigger" raised>
<iron-icon icon="visibility"></iron-icon>
<span>View By</span>
</paper-button>
<paper-menu id="viewMode" class="dropdown-content" selected="0">
<paper-item>Most Recent</paper-item>
<paper-item>Least Recent</paper-item>
<paper-item>Highest Price</paper-item>
<template is="dom-repeat" items="[[pic.results173]]"
as="url" sort="_sortList">
_sortList: function(first, second) {
var el = this.$.viewMode;
var listMode;
switch(el.selected) {
case 0:
listMode = this._mostRecent(first , second);
break;
}
return listMode;
},
The developers guide has your answer. Give your template an id (say id="list") and call this.$.list.render()
i have a little problem that i can not solve on my own.
I have custom element:
<dom-module id="station">
<template>
<country-iso-alpha3 id="country" selected={{country}}></country-iso-alpha3>
</template>
this custom element station has country property with CZE default value.
if we look in country-iso-alpha3 :
<paper-dropdown-menu>
<paper-menu class="dropdown-content" attr-for-selected="type" selected="{{selected}}" >
<paper-item type="CZE">
<span>CZE</span>
</paper-item>
<paper-item type="ENG">
<span>ENG</span>
</paper-item>
</paper-menu>
</paper-dropdown-menu>
properties of country-iso-alpha3 are:
properties: {
label: {},
selected: {},
},
what i am trying to achieve is that when user tap on paper item inside paper menu, property country in station element should update. But the only thing that is updated is selected attribute in station
Is there any way how to achieve this? Maybe this is already 3 way data binding.
I know, my english is not best and this is not so easy to demonstrate so if you do not undestand i can try to explain it a little bit better
In your country-iso-alpha3 element, configure selected to propagate changes upward. This can be done by setting notify: true.
properties: {
selected: {
type: String,
notify: true
}
},
By default, changes are not propagated to the parent element (docs).
I have a paper-menu with paper-items. Each item contains a paper-button. The paper-button click/tap event fires only if the button is not inside a selected paper-item.
<body>
<template is="dom-bind" id="root">
<paper-menu>
<paper-item>
Item 1
<paper-button id="button_1" on-tap="tapAction" raised>Button 1</paper-button>
</paper-item>
<paper-item>
Item 2
<paper-button id="button_2" on-tap="tapAction" raised>Button 2</paper-button>
</paper-item>
<paper-item>
Item 3
<paper-button id="button_3" on-tap="tapAction" raised>Button 2</paper-button>
</paper-item>
</paper-menu>
</template>
<script>
var root = document.querySelector("#root");
root.tapAction = function(e) {
console.log("tapAction: ", e.target.id)
};
</script>
</body>
See also:
http://plnkr.co/edit/vZk8gwLOxh6hxyiGPiu5
How can i trigger click/tap events on a Polymer component like paper-button after the menu item is selected?
The
<paper-item>
seems to be blocking the activation of your
<paper-button>
elements. You can overcome this in 2 ways. First you could use the iron-activate event of
<paper-menu>
like so
<paper-menu on-iron-activate="tapAction">
...
</paper-menu>
or you could remove the
<paper-item>
wrappers from around
<paper-button>
which will allow them to be activated.
<paper-menu>
<div>
Item 1 <paper-button id="button_1" on-tap="tapAction" raised>Button 1</paper-button>
</div>
<div>
Item 2
<paper-button id="button_2" on-tap="tapAction" raised>Button 2</paper-button>
</div>
<div>
Item 3
<paper-button id="button_3" on-tap="tapAction" raised>Button 2</paper-button>
</div>
</paper-menu>
And I don't think you need to worry about doing
var root = document.querySelector("#root");
as
<template is="dom-bind" id="root">
...
</template>
already does that for you, so you should be able to get away with just doing this
<script>
root.tapAction = function(e) {
console.log("tapAction: ", e.target.id)
};
</script>
UPDATE:
The solution of removing
<paper-item>
and replacing it with
<div>
has it's problems as once it's selected, the selected items button will no longer be able to be activated. Don't ask me why as I only just discovered this myself. The solution of iron-activate will still fire even when the item is selected but the event.target will be the
<paper-menu>
and while you could use the selected attribute to figure out which item is selected, it's always going to be one step behind the actual selected item. So if you selected item 1, then the selected will initially be undefined, unless you preselect an item
<paper-menu selected="0">
but even then, if you select another item, the selected item in the fired event will still be the previous one. You'll have to experiment, but I might suggest you try something else, as
<paper-menu>
might not fit the purpose you are wanting to use it for, if you're wanting to use
<paper-button>
elements.
I am trying to build a custom polymer element which has a div like this
<core-menu>
<paper-item on-tap={{openPage}}><core-icon icon="add"></core-icon> Add Issues</paper-item>
<paper-item on-tap={{openPage}}><core-icon icon="view-list"></core-icon> View Issues</paper-item>
<paper-item on-tap={{openPage}}><core-icon icon="lock"></core-icon>Logout</paper-item>
</core-menu>
And this openPage function needs to provide this kind of operation
openPage: function(event, details, sender) {
console.log("open page called item "+ item);
}
I am not sure how to get the item clicked. Say, if I click on the Logout item, i would like the value of item to be a number, like something that could say that nth paper-item was clicked.
I dont know how to get this value from event or details or sender.
Thanks in advance
You can do something like this:
<core-menu>
<paper-item data-action-id="1" on-tap={{openPage}}><core-icon icon="add"></core-icon> Add Issues</paper-item>
<paper-item data-action-id="2" on-tap={{openPage}}><core-icon icon="view-list"></core-icon> View Issues</paper-item>
<paper-item data-action-id="3" on-tap={{openPage}}><core-icon icon="lock"></core-icon>Logout</paper-item>
</core-menu>
And then:
openPage: function(event, details, sender) {
console.log("open page called item "+ sender.target.attributes["data-action-id"]);
}
"sender.target" is returning paper-item