googlearchive / paper-menu Goto Github PK
View Code? Open in Web Editor NEWA Material Design menu
Home Page: https://www.webcomponents.org/element/PolymerElements/paper-menu
A Material Design menu
Home Page: https://www.webcomponents.org/element/PolymerElements/paper-menu
This is probably related to PolymerElements/paper-tabs#28
<paper-menu selectable=".item">
<paper-item class="item" on-tap="open">...</paper-item>
<iron-collapse>...</iron-collapse>
...
<paper-menu>
Each paper-item in my paper-menu opens the iron-collapse below it. Tapping anywhere within the iron-collapse content will focus and scroll to the paper-item above it.
Adding "e.preventDefault()" to on-down events of the iron-collapse elements fixes this for mouse events, but not for touch events. Is there another way to prevent focus and scroll?
The background of the previous selection flickers whenever a menu item is selected for the first time. The flicker occurs when the left (or right) mouse button is pressed, before it is released. I can replicate this on the demo page, on Chrome 43, Firefox 38 and IE 11.
for every tap in the submenu the selection of the item containing the submenu toggles in the parent menu. what would be a reasonable behavior here anyway?
Hello,
I want to deactivate on-tap event management to avoid to toggle menu.
My goal is to have this
and be able to click on buttons without toggle menu.
I search but I don't find a way. I can contribute and send a pull request but before work I want to know if it is not already possible with a method I don't know.
I've got this element:
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<dom-module id='test-element'>
<template>
<input id='first'>
<input id='second' on-blur='xxx' />
<input id='third'>
<paper-menu id='fourth' on-blur='xxx'>
<paper-item>Item 1</paper-item>
</paper-menu>
<input id='fifth'>
</template>
<script>
Polymer({
is: "test-element",
properties: {
badgesData: {
type: Array,
value: function(){return [];}
}
},
xxx: function(evt, obj) {
console.log('xxx', evt, obj, evt.type, evt.target);
},
ready: function() {
}
});
</script>
</dom-module>
Steps:
Expected:
3. focus on input#third, tab pressed -> nothing
4. focus on input#fourth, tab pressed -> FocusEvent {isTrusted: true} 0 blur
This is a regression from the behaviour of paper-menu in Polymer 0.5 - clicking on a menu item should fire a relevant event (iron-select
is fine), but the menu should not remember which item was last selected, because that's completely unintuitive behaviour and flies in the face established menu behaviour.
With the current behaviour, if I have an app menu and I select an item in that menu, the next time I open the menu, that item is still highlighted, and selecting it again has no effect. For a common example where this is clearly broken, consider an overflow menu with a Save As item.
As it is, this is a block for me updating my app to Polymer 1.x, and I'm sure I'm not alone (though it can be hacked around, that shouldn't really be necessary...).
From @Xeselaro on January 10, 2016 18:2
BUG:
document.querySelector('#submenuelement').toggle() is not a function
Copied from original issue: Polymer/polymer#3283
We're using the menu component here (https://chromedevtools.github.io/debugger-protocol-viewer/) and have a problem:
screenshot w/ devtools open and two troublesome text styles disabled: http://i.imgur.com/bofejWs.png
We can also reproduce on https://elements.polymer-project.org/elements/paper-menu?active=paper-menu&view=demo:demo/index.html
I'm playing around with this example (1.1.0): https://elements.polymer-project.org/elements/paper-menu?view=demo:demo/index.html
In Safari 7.1, with the "Standard" menu, sometimes you need to click twice. If you click in the white area to the right of the word, it moves the gray bar, and also makes the menuitem bold. If you click on a word itself, it moves the gray bar, but doesn't make it bold. You have to click a second time to actually activate it.
Other menu types on that page work the same way. Firefox 40 does not do this: one click is always enough in Firefox.
I don't think this is the same as issue #31, but I'm not sure.
in 0.5 version we can build sub menu with core-menu and core-submenu
Where is Paper-submenu?
It would be nice to have a way to modify the .selectable-content
. As is, I can't add iron-flex-layout to the .selectable-content and instead have to apply it to the items.
Currently there's no way to de-select all items once one it selected without using the multi
attr.
We should support a toggles
property (or similar) so that users don't have to imperatively do this themselves.
When creating using paper-menu with paper-submenu children the selected attribute of the paper-menu doesn't account for the paper-items within the paper-submenu.
Expected functionality:
-paper-menu
--- paper-item (selection 0)
--- paper-item (selection 1)
--- paper-submenu
------ paper-item (selection 2)
------ paper-item (selection 3)
--- paper-item (selection 4)
Currently:
-paper-menu
--- paper-item (selection 0)
--- paper-submenu
------ paper-item (selection 1)
------ paper-item (selection 1)
------ paper-item (selection 1)
--- paper-item (selection 2)
What are the differences between these two elements and when should we use one and not the other?
At first glance, this appeared to be because it wasn't listed in the bower.json "main" field.
But I tried fixing this locally, and no dice. Not sure if there's something causing problems in paper-submenu docs or what.
From documentation: "It implements key bindings to navigate through the menu with the up and down arrow keys, esc to exit the menu, and enter to activate a menu item. Typing the first letter of a menu item will also focus it."
Neither SPACE nor ENTER activate menu item, same issue with paper-tabs (pressing ENTER does not activate selected tab, although it activates paper-ripple)
Trying out the demo i get an error in the first two clicks on a multi select, first time i click, selecting one option it shows this:
Uncaught TypeError: focusedItem.setAttribute is not a function
Then when i click second time:
Uncaught TypeError: old.setAttribute is not a function
Items are still selected even after the errors.
See screenshot from the docs here: https://elements.polymer-project.org/elements/paper-menu
Trying to navigate the menu/submenu demo in the elements catalog results in a really broken keyboard test (usually focus just vanishes from the submenu when you try to navigate with any keyboard keys)
For focus state, we still need concrete specs here. For now, let's try:
Hi. I'm not sure whether this an issue of <paper-menu>
or <paper-item>
, so sorry if I'm raising this in the wrong repository.
In this plunk demonstrate how it's not possible to select a <paper-item>
, when it's content is distributed into the Shadow DOM. Clicking a distributed <span>
does nothing. It is still possible to select an item by clicking around it, though.
This problem does not occur with Shady DOM (when you comment out the top script).
The paper-item remains selected after the menu closes. This means a user cannot select the same menu item later in their session. For example, one could imagine a menu with the typical cut/copy/paste menu items. In a word processing application like Google Docs, you'd want to be able to use these menu items multiple times during an editing session.
By default the menu should allow you to select the same menu item multiple times. This is the standard way that menus work in every windowing toolkit. If you want persistent menu item selections (such as with checkbox or radio menu items), then this should be an option, but not the default.
Hello Polymer team,
See : http://jsbin.com/weqodarine/10/edit?html,output
We can see the two paper-menu
when we click on the two paper-icon-button
.
Only the first paper-menu
is displayed correctly.
paper-icon-button
.paper-menu
is displayed.paper-icon-button
.paper-menu
is displayed too low (we can see its).In iron-list
element.
Maybe, I don't use well this feature?
Thx for your attention.
Should the attrForSelected stuff from IronSelectableBehavior
work with paper-menu
? It doesn't appear to, see the following jsbin:
There is no reference in the docs to paper-submenu. As a result you can't find it from the Polymer Element Catalogue.
you can't programmatically select a submenu. Here's a jsbin showing it: http://jsbin.com/qeyusajohu/1/edit?html,console,output
Hi,
I try to code a component that do a recursive call based on data from table.
With static way it work, but with recursive no.
I have done a plunker
I think that we can remove the old branches:
0.8-behaviors
0.8.3-fix
addMain
(already merged)drama-llama-breaking-change
(already closed)"selecting an item styles it and the parent" fails with "Error: expected 'bold' to equal 'normal'"
In Firefox, I find that I frequently have to double-click paper-items inside a paper-menu if the paper-item has children other than text. The first click activates the element the same way the arrow keys do, but the second click is required to actually select the element.
<paper-menu>
<paper-item>
Click me once
</paper-item>
<paper-item>
Click me once also
</paper-item>
<paper-item>
<div>You have to click me twice</div>
</paper-item>
<paper-item>
<div>Me too</div>
</paper-item>
</paper-menu>
The background on focused items is full opacity and the same color as the menu item text. This makes the text unreadable.
## Expected outcomeThe opacity of the background for focused menu items should be lower than the text so the text is readable.
The opacity is the same as the text so you cannot read the menu item while it is focused.
paper-menu
element in the page.paper-menu > a
element.Relates to: Polymer/polymer-starter-kit#515
Documentation states attrForSelected but only attr-for-selected works.
Or in markup. Is it possible? Using the syntax for iron-selector doesn't appear to work.
EDIT: Ah, you can find it by looking at the behavior. Ok, it is documented, but might be helpful to provide an example and a pointer as to where to look?
Search every bit of documentation but I can't find this:
I've got something like the code below. I'm using link tags in combination with app-router routing which works great. The only problem is: I would like to have have the entire paper-menu-item to be clickable with the link tag.
When I use below code, the right page is retrieved when clicking directly on the link tekst itself, but that doesn't create a "selected" state. When I click on the button (just off the text) then the button IS selected but the page isn't retrieved because I didn't click the link...
There must be an easy way to do this right? I mean, I could force this by overriding all the CSS but it seems to me a link in a paper-item in a paper-menu would be a very common thing which should do this automatically or with an attribute or someting?
<paper-menu class="list">
<paper-item icon="home" label="Home" ><a is="pushstate-anchor" href="/">Home</a></paper-item>
<paper-item icon="polymer" label="Demo"><a is="pushstate-anchor" href="/demo">Demo</a></paper-item>
</paper-menu>
(not sure if I posted this right in paper-menu, maybe it belongs in paper-item?)
Neither the selected or the on-iron-activate are triggered until second tap on Firefox.
<paper-menu id="menu" class="list" attr-for-selected="data-route" selected="{{route}}" on-iron-activate="_listTap" >
<template is="dom-repeat" items="{{subjects}}">
<paper-item data-route$="{{item.page}}" >
<iron-icon icon="{{item.icon}}"></iron-icon> <span>{{item.text}}</span>
</paper-item>
</template>
</paper-menu>
In the column to the right, contrast on "starred" and "inbox" is not sufficient. Is that supposed to be disabled text?
Windows specific:
Chrome / NVDA: When using the arrow keys to navigate through, I cannot use the arrows to get from the top set of menus to the bottom multi-select menu. I have to press tab to get me to the bottom menu, and in doing so, I am not able to access the "multi-select" text using the screen reader. This seems to be specific to NVDA on Chrome though.
When clicking an item that is already selected in the paper-menu, the menu doesn't automatically hide itself. In my application the data in the menu changes from time to time. When you open the menu after a data change an item is already highlighted as if selected, and when you click it the paper-menu doesn't hide itself.
We would like to see a 'noAnimation' (or 'noAnimations') property for the paper-submenu that would disable animation on the iron-collapse (set its 'noAnimation' property).
This would be consistent with 'paper-menu-button' and 'paper-dropdown-menu' noAnimations properties.
Animations are resource hungry, bringing our application to the knees on mobile devices.
Right now is not set so it is inline
. Suggest to set display: block
on the host.
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-route="two-2" href="{{baseUrl}}two-2">
<paper-item>
<iron-icon icon="info"></iron-icon>
<span>two 2</span>
</paper-item>
</a>
</paper-menu>
</paper-submenu>
<a data-route="users" href="{{baseUrl}}users">
<iron-icon icon="info"></iron-icon>
<span>Users</span>
</a>
<a data-route="contact" href="{{baseUrl}}contact">
<iron-icon icon="mail"></iron-icon>
<span>Contact</span>
</a>
</paper-menu>
Any idea how to fix it?
I've got many elements in paper-menu, let's say:
<paper-menu>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
<paper-item>Item 4</paper-item>
<paper-item>Item 5</paper-item>
<paper-item>Item 6</paper-item>
<paper-item>Item 7</paper-item>
<paper-item>Item 8</paper-item>
<paper-item>Item 9</paper-item>
<paper-item>Item 10</paper-item>
</paper-menu>
When paper-menu
element has focus, arrow keys (Down, Up) change highlighting on paper-menu
but also scrolls whole page.
When I press shift+Up or shift+down, page is not scrolled.
Is this intended?
I would expect Down and Up don't scroll page.
Hello!
Polymer 1.0.5 does not have Polymer.Gestures.findOriginalTarget() that is called from _onParentIronActivate()
in paper-submenu.html
.
https://github.com/PolymerElements/paper-menu/blob/master/paper-submenu.html#L171
I'm playing around with this example.
https://github.com/PolymerElements/app-layout-templates/blob/master/nav-list-detail/src/x-app.html
I've noticed that when the list is clicked it calls _listTap
on-iron-activate="_listTap"
I modified my function to look like this
_listTap: function(event, target) {
console.log(target.selected);
}
If I click the first item in the list it prints 1. Wouldn't the intended behavior start counting at 0?
The detached function in paper-submenu.html - v1.2.2 is misspelt as dettached
. This still appears in master as the time of writing.
I have a paper-menu with a list of paper-items. When I scroll down and then click on a paper-item, the menu (and selection) jumps to the top of the menu to the first element.
I first saw this behavior in Chromium with polymer 0.8-rc.7 and 0.8 elements, but was able to reproduce this separately.
Here is a repro for both 0.8 and 0.9, and some comments related to iron-menu-behavior and iron-selectable.
I didn't see this behavior with polymer 0.5.2 and 0.5.2 elements.
Any help would be appreciated, thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.