Add ICU message format support
[chromium-blink-merge.git] / third_party / polymer / v1_0 / components-chromium / paper-menu / paper-menu.html
blob4553813fbc452f9c8fdf96f6e112a888a8a9d3e5
1 <!--
2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9 --><html><head><link rel="import" href="../polymer/polymer.html">
10 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">
11 <link rel="import" href="../paper-styles/paper-styles.html">
13 <!--
14 `<paper-menu>` implements an accessible menu control with Material Design styling. The focused item
15 is highlighted, and the selected item has bolded text.
17 <paper-menu>
18 <paper-item>Item 1</paper-item>
19 <paper-item>Item 2</paper-item>
20 </paper-menu>
22 An initial selection can be specified with the `selected` attribute.
24 <paper-menu selected="0">
25 <paper-item>Item 1</paper-item>
26 <paper-item>Item 2</paper-item>
27 </paper-menu>
29 Make a multi-select menu with the `multi` attribute. Items in a multi-select menu can be deselected,
30 and multiple item can be selected.
32 <paper-menu multi>
33 <paper-item>Item 1</paper-item>
34 <paper-item>Item 2</paper-item>
35 </paper-menu>
37 ### Styling
39 The following custom properties and mixins are available for styling:
41 Custom property | Description | Default
42 ----------------|-------------|----------
43 `--paper-menu-background-color` | Menu background color | `--primary-background-color`
44 `--paper-menu-color` | Menu foreground color | `--primary-text-color`
45 `--paper-menu-disabled-color` | Foreground color for a disabled item | `--disabled-text-color`
46 `--paper-menu` | Mixin applied to the menu | `{}`
47 `--paper-menu-selected-item` | Mixin applied to the selected item | `{}`
48 `--paper-menu-focused-item` | Mixin applied to the focused item | `{}`
49 `--paper-menu-focused-item-after` | Mixin applied to the ::after pseudo-element for the focused item | `{}`
51 ### Accessibility
53 `<paper-menu>` has `role="menu"` by default. A multi-select menu will also have
54 `aria-multiselectable` set. It implements key bindings to navigate through the menu with the up and
55 down arrow keys, esc to exit the menu, and enter to activate a menu item. Typing the first letter
56 of a menu item will also focus it.
58 @group Paper Elements
59 @element paper-menu
60 @hero hero.svg
61 @demo demo/index.html
62 -->
64 </head><body><dom-module id="paper-menu">
66 <style>
68 :host {
69 display: block;
70 padding: 8px 0;
72 background: var(--paper-menu-background-color, --primary-background-color);
73 color: var(--paper-menu-color, --primary-text-color);
75 @apply(--paper-menu);
78 /* need a wrapper element to make this higher specificity than the :host rule in paper-item */
79 .content > ::content > .iron-selected {
80 font-weight: bold;
82 @apply(--paper-menu-selected-item);
85 .content > ::content > [disabled] {
86 color: var(--paper-menu-disabled-color, --disabled-text-color);
89 .content > ::content > *:focus {
90 position: relative;
91 outline: 0;
93 @apply(--paper-menu-focused-item);
96 .content > ::content > *:focus:after {
97 @apply(--layout-fit);
98 background: currentColor;
99 /* FIXME move to paper-styles for next widget */
100 opacity: 0.12;
101 content: '';
103 @apply(--paper-menu-focused-item-after);
106 .content > ::content > *[colored]:focus:after {
107 opacity: 0.26;
110 </style>
112 <template>
114 <div class="content">
115 <content></content>
116 </div>
118 </template>
120 </dom-module>
122 <script src="paper-menu-extracted.js"></script></body></html>