OLD | NEW |
(Empty) | |
| 1 |
| 2 <!--- |
| 3 |
| 4 This README is automatically generated from the comments in these files: |
| 5 paper-menu.html paper-submenu.html |
| 6 |
| 7 Edit those files, and our readme bot will duplicate them over here! |
| 8 Edit this file, and the bot will squash your changes :) |
| 9 |
| 10 --> |
| 11 |
| 12 [![Build Status](https://travis-ci.org/PolymerElements/paper-menu.svg?branch=mas
ter)](https://travis-ci.org/PolymerElements/paper-menu) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-menu)_ |
| 15 |
| 16 |
| 17 ##<paper-menu> |
| 18 |
| 19 |
| 20 Material design: [Menus](https://www.google.com/design/spec/components/menus.htm
l) |
| 21 |
| 22 `<paper-menu>` implements an accessible menu control with Material Design stylin
g. The focused item |
| 23 is highlighted, and the selected item has bolded text. |
| 24 |
| 25 <paper-menu> |
| 26 <paper-item>Item 1</paper-item> |
| 27 <paper-item>Item 2</paper-item> |
| 28 </paper-menu> |
| 29 |
| 30 An initial selection can be specified with the `selected` attribute. |
| 31 |
| 32 <paper-menu selected="0"> |
| 33 <paper-item>Item 1</paper-item> |
| 34 <paper-item>Item 2</paper-item> |
| 35 </paper-menu> |
| 36 |
| 37 Make a multi-select menu with the `multi` attribute. Items in a multi-select men
u can be deselected, |
| 38 and multiple items can be selected. |
| 39 |
| 40 <paper-menu multi> |
| 41 <paper-item>Item 1</paper-item> |
| 42 <paper-item>Item 2</paper-item> |
| 43 </paper-menu> |
| 44 |
| 45 ### Styling |
| 46 |
| 47 The following custom properties and mixins are available for styling: |
| 48 |
| 49 Custom property | Description | Default |
| 50 ----------------|-------------|---------- |
| 51 `--paper-menu-background-color` | Menu background color
| `--primary-background-color` |
| 52 `--paper-menu-color` | Menu foreground color
| `--primary-text-color` |
| 53 `--paper-menu-disabled-color` | Foreground color for a disabled item
| `--disabled-text-color` |
| 54 `--paper-menu` | Mixin applied to the menu
| `{}` |
| 55 `--paper-menu-selected-item` | Mixin applied to the selected item
| `{}` |
| 56 `--paper-menu-focused-item` | Mixin applied to the focused item
| `{}` |
| 57 `--paper-menu-focused-item-after` | Mixin applied to the ::after pseudo-element
for the focused item | `{}` |
| 58 |
| 59 ### Accessibility |
| 60 |
| 61 `<paper-menu>` has `role="menu"` by default. A multi-select menu will also have |
| 62 `aria-multiselectable` set. It implements key bindings to navigate through the m
enu with the up and |
| 63 down arrow keys, esc to exit the menu, and enter to activate a menu item. Typing
the first letter |
| 64 of a menu item will also focus it. |
| 65 |
| 66 |
| 67 |
| 68 ##<paper-submenu> |
| 69 |
| 70 |
| 71 `<paper-submenu>` is a nested menu inside of a parent `<paper-menu>`. It |
| 72 consists of a trigger that expands or collapses another `<paper-menu>`: |
| 73 |
| 74 <paper-menu> |
| 75 <paper-submenu> |
| 76 <paper-item class="menu-trigger">Topics</paper-item> |
| 77 <paper-menu class="menu-content"> |
| 78 <paper-item>Topic 1</paper-item> |
| 79 <paper-item>Topic 2</paper-item> |
| 80 <paper-item>Topic 3</paper-item> |
| 81 </paper-menu> |
| 82 </paper-submenu> |
| 83 <paper-submenu> |
| 84 <paper-item class="menu-trigger">Faves</paper-item> |
| 85 <paper-menu class="menu-content"> |
| 86 <paper-item>Fave 1</paper-item> |
| 87 <paper-item>Fave 2</paper-item> |
| 88 </paper-menu> |
| 89 </paper-submenu> |
| 90 <paper-submenu disabled> |
| 91 <paper-item class="menu-trigger">Unavailable</paper-item> |
| 92 <paper-menu class="menu-content"> |
| 93 <paper-item>Disabled 1</paper-item> |
| 94 <paper-item>Disabled 2</paper-item> |
| 95 </paper-menu> |
| 96 </paper-submenu> |
| 97 </paper-menu> |
| 98 |
| 99 Just like in `<paper-menu>`, the focused item is highlighted, and the selected |
| 100 item has bolded text. Please see the `<paper-menu>` docs for which attributes |
| 101 (such as `multi` and `selected`), and styling options are available for the |
| 102 `menu-content` menu. |
| 103 |
| 104 |
OLD | NEW |