├── .github └── ISSUE_TEMPLATE.md ├── .gitignore ├── .travis.yml ├── CONTRIBUTING.md ├── README.md ├── bower.json ├── demo └── index.html ├── hero.svg ├── index.html ├── paper-menu-shared-styles.html ├── paper-menu.html ├── paper-submenu.html └── test ├── index.html ├── paper-menu.html └── paper-submenu.html /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | ### Description 3 | 4 | 5 | ### Expected outcome 6 | 7 | 8 | 9 | ### Actual outcome 10 | 11 | 12 | 13 | ### Live Demo 14 | 15 | 16 | ### Steps to reproduce 17 | 18 | 23 | 24 | ### Browsers Affected 25 | 26 | - [ ] Chrome 27 | - [ ] Firefox 28 | - [ ] Safari 9 29 | - [ ] Safari 8 30 | - [ ] Safari 7 31 | - [ ] Edge 32 | - [ ] IE 11 33 | - [ ] IE 10 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components/ 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: required 3 | before_script: 4 | - npm install -g bower polylint web-component-tester 5 | - bower install 6 | - polylint 7 | env: 8 | global: 9 | - secure: >- 10 | QrRAESUd7+2wMubE/Ns6jGY7iUl3ffKPgmejKbWHNBMIXM8pAjtHqNVZrzMEmGhFIIJ9BhcUH1BR2+D8/6NEsLgZQNDZMZTWWc6Ny9QGh5WeDMSyP5/3M8KSKZ4EkFt0E/pMu3ZBwtUaHS3oN43qzBZ0F1p+rOg5I0hqDGfATck= 11 | - secure: >- 12 | UKIrW6iMM38oTlGvL3fzQ/0jdnTgettommG9+oPv+/zFBKfJQeN4Gxndqv3oqlt081SA5uNXHU7WhjPaGmv4h3oK5glX2p825P683ODlNk4DFzOQVFU3HsdBt3AOFz4zeNVaGJaGOFw0m3V4/yvia9ny7VcDuuDubBbp2Y9mEg4= 13 | node_js: '6' 14 | addons: 15 | firefox: latest 16 | apt: 17 | sources: 18 | - google-chrome 19 | packages: 20 | - google-chrome-stable 21 | script: 22 | - xvfb-run wct 23 | - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi' 24 | dist: trusty 25 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 13 | 14 | # Polymer Elements 15 | ## Guide for Contributors 16 | 17 | Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines: 18 | 19 | ### Filing Issues 20 | 21 | **If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions: 22 | 23 | 1. **Who will use the feature?** _“As someone filling out a form…”_ 24 | 2. **When will they use the feature?** _“When I enter an invalid value…”_ 25 | 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ 26 | 27 | **If you are filing an issue to report a bug**, please provide: 28 | 29 | 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: 30 | 31 | ```markdown 32 | The `paper-foo` element causes the page to turn pink when clicked. 33 | 34 | ## Expected outcome 35 | 36 | The page stays the same color. 37 | 38 | ## Actual outcome 39 | 40 | The page turns pink. 41 | 42 | ## Steps to reproduce 43 | 44 | 1. Put a `paper-foo` element in the page. 45 | 2. Open the page in a web browser. 46 | 3. Click the `paper-foo` element. 47 | ``` 48 | 49 | 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output). 50 | 51 | 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. 52 | 53 | ### Submitting Pull Requests 54 | 55 | **Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request. 56 | 57 | When submitting pull requests, please provide: 58 | 59 | 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax: 60 | 61 | ```markdown 62 | (For a single issue) 63 | Fixes #20 64 | 65 | (For multiple issues) 66 | Fixes #32, fixes #40 67 | ``` 68 | 69 | 2. **A succinct description of the design** used to fix any related issues. For example: 70 | 71 | ```markdown 72 | This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked. 73 | ``` 74 | 75 | 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered. 76 | 77 | If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that! 78 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | [![Build status](https://travis-ci.org/PolymerElements/paper-menu.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-menu) 16 | 17 | _[Demo and API docs](https://elements.polymer-project.org/elements/paper-menu)_ 18 | 19 | 20 | ## <paper-menu> 21 | 22 | Material design: [Menus](https://www.google.com/design/spec/components/menus.html) 23 | 24 | 25 | ⚠️ This element is now deprecated ⚠️ 26 | 27 | ``is deprecated in favour of [``](https://github.com/polymerelements/paper-listbox). The APIs are very similar, and upgrading should be straight forward. For this reason, this element has not been ported to Polymer 2.x, and is *not* a hybrid element. If you use it along side other hybrid elements, please note that it will force your installed Polymer version to 1.x as a result. 28 | 29 | `` implements an accessible menu control with Material Design styling. The focused item 30 | is highlighted, and the selected item has bolded text. 31 | 32 | ```html 33 | 34 | Item 1 35 | Item 2 36 | 37 | ``` 38 | 39 | An initial selection can be specified with the `selected` attribute. 40 | 41 | ```html 42 | 43 | Item 1 44 | Item 2 45 | 46 | ``` 47 | 48 | Make a multi-select menu with the `multi` attribute. Items in a multi-select menu can be deselected, 49 | and multiple items can be selected. 50 | 51 | ```html 52 | 53 | Item 1 54 | Item 2 55 | 56 | ``` 57 | 58 | ### Styling 59 | 60 | The following custom properties and mixins are available for styling: 61 | 62 | | Custom property | Description | Default | 63 | | --- | --- | --- | 64 | | `--paper-menu-background-color` | Menu background color | `--primary-background-color` | 65 | | `--paper-menu-color` | Menu foreground color | `--primary-text-color` | 66 | | `--paper-menu-disabled-color` | Foreground color for a disabled item | `--disabled-text-color` | 67 | | `--paper-menu` | Mixin applied to the menu | `{}` | 68 | | `--paper-menu-selected-item` | Mixin applied to the selected item | `{}` | 69 | | `--paper-menu-focused-item` | Mixin applied to the focused item | `{}` | 70 | | `--paper-menu-focused-item-after` | Mixin applied to the ::after pseudo-element for the focused item | `{}` | 71 | 72 | ### Accessibility 73 | 74 | `` has `role="menu"` by default. A multi-select menu will also have 75 | `aria-multiselectable` set. It implements key bindings to navigate through the menu with the up and 76 | down arrow keys, esc to exit the menu, and enter to activate a menu item. Typing the first letter 77 | of a menu item will also focus it. 78 | 79 | 80 | 81 | ##<paper-submenu> 82 | 83 | `` is a nested menu inside of a parent ``. It 84 | consists of a trigger that expands or collapses another ``: 85 | 86 | ```html 87 | 88 | 89 | Topics 90 | 91 | Topic 1 92 | Topic 2 93 | Topic 3 94 | 95 | 96 | 97 | Faves 98 | 99 | Fave 1 100 | Fave 2 101 | 102 | 103 | 104 | Unavailable 105 | 106 | Disabled 1 107 | Disabled 2 108 | 109 | 110 | 111 | ``` 112 | 113 | Just like in ``, the focused item is highlighted, and the selected 114 | item has bolded text. Please see the `` docs for which attributes 115 | (such as `multi` and `selected`), and styling options are available for the 116 | `menu-content` menu. 117 | 118 | 119 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "paper-menu", 3 | "version": "1.3.0", 4 | "description": "Implements an accessible material design menu", 5 | "authors": "The Polymer Authors", 6 | "keywords": [ 7 | "web-components", 8 | "polymer", 9 | "menu" 10 | ], 11 | "main": [ 12 | "paper-menu.html", 13 | "paper-submenu.html" 14 | ], 15 | "private": true, 16 | "repository": { 17 | "type": "git", 18 | "url": "git://github.com/PolymerElements/paper-menu" 19 | }, 20 | "license": "http://polymer.github.io/LICENSE.txt", 21 | "homepage": "https://github.com/PolymerElements/paper-menu", 22 | "ignore": [], 23 | "dependencies": { 24 | "polymer": "Polymer/polymer#^1.1.0", 25 | "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0", 26 | "iron-collapse": "PolymerElements/iron-collapse#^1.0.0", 27 | "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0", 28 | "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", 29 | "paper-styles": "PolymerElements/paper-styles#^1.0.0" 30 | }, 31 | "devDependencies": { 32 | "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", 33 | "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", 34 | "paper-item": "PolymerElements/paper-item#^1.0.0", 35 | "test-fixture": "PolymerElements/test-fixture#^1.0.0", 36 | "web-component-tester": "^4.0.0", 37 | "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | paper-menu demo 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 55 | 56 | 57 |
58 |
59 |

Standard

60 |
61 | 62 | Inbox 63 | Starred 64 | Sent mail 65 | Drafts 66 | 67 |
68 |
69 | 70 |
71 |

Pre-selected

72 |
73 | 74 | Inbox 75 | Starred 76 | Sent mail 77 | Drafts 78 | 79 |
80 |
81 | 82 |
83 |

Multi-select

84 |
85 | 86 | Bold 87 | Italic 88 | Underline 89 | Strikethrough 90 | 91 |
92 |
93 | 94 |
95 |

Sub-menu

96 |
97 | 98 | 99 | paper-menu 100 | 101 | 102 | Properties 103 | 104 | focusedItem 105 | attrForItemTitle 106 | 107 | 108 | 109 | Methods 110 | 111 | select(value) 112 | 113 | 114 | 115 | 116 | 117 | 118 | paper-submenu 119 | 120 | 121 | Properties 122 | 123 | opened 124 | 125 | 126 | 127 | Methods 128 | 129 | open() 130 | close() 131 | toggle() 132 | 133 | 134 | 135 | 136 | 137 | 138 | Unavailable 139 | 140 | Unavailable 1 141 | Unavailable 2 142 | 143 | 144 | 145 |
146 |
147 |
148 | 149 | 150 | -------------------------------------------------------------------------------- /hero.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 18 | 19 | 23 | 24 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | paper-menu 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /paper-menu-shared-styles.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 51 | 52 | -------------------------------------------------------------------------------- /paper-menu.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 68 | 69 | 70 | 88 | 89 | 100 | 101 | -------------------------------------------------------------------------------- /paper-submenu.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 55 | 56 | 57 | 67 | 68 | 223 | 224 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | paper-menu tests 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /test/paper-menu.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | paper-menu tests 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 36 | 37 | 38 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /test/paper-submenu.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | paper-submenu tests 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 35 | 36 | 37 | 38 | 66 | 67 | 68 | 69 | 79 | 80 | 81 | 283 | 284 | 285 | 286 | --------------------------------------------------------------------------------