← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-menu/README.md

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/paper-menu/README.md
 
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
The bot does some handling of markdown. Please file a bug if it does the wrong
 
11
thing! https://github.com/PolymerLabs/tedium/issues
 
12
 
 
13
-->
 
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
##&lt;paper-menu&gt;
 
21
 
 
22
Material design: [Menus](https://www.google.com/design/spec/components/menus.html)
 
23
 
 
24
`<paper-menu>` implements an accessible menu control with Material Design styling. The focused item
 
25
is highlighted, and the selected item has bolded text.
 
26
 
 
27
```html
 
28
<paper-menu>
 
29
  <paper-item>Item 1</paper-item>
 
30
  <paper-item>Item 2</paper-item>
 
31
</paper-menu>
 
32
```
 
33
 
 
34
An initial selection can be specified with the `selected` attribute.
 
35
 
 
36
```html
 
37
<paper-menu selected="0">
 
38
  <paper-item>Item 1</paper-item>
 
39
  <paper-item>Item 2</paper-item>
 
40
</paper-menu>
 
41
```
 
42
 
 
43
Make a multi-select menu with the `multi` attribute. Items in a multi-select menu can be deselected,
 
44
and multiple items can be selected.
 
45
 
 
46
```html
 
47
<paper-menu multi>
 
48
  <paper-item>Item 1</paper-item>
 
49
  <paper-item>Item 2</paper-item>
 
50
</paper-menu>
 
51
```
 
52
 
 
53
### Styling
 
54
 
 
55
The following custom properties and mixins are available for styling:
 
56
 
 
57
| Custom property | Description | Default |
 
58
| --- | --- | --- |
 
59
| `--paper-menu-background-color` | Menu background color | `--primary-background-color` |
 
60
| `--paper-menu-color` | Menu foreground color | `--primary-text-color` |
 
61
| `--paper-menu-disabled-color` | Foreground color for a disabled item | `--disabled-text-color` |
 
62
| `--paper-menu` | Mixin applied to the menu | `{}` |
 
63
| `--paper-menu-selected-item` | Mixin applied to the selected item | `{}` |
 
64
| `--paper-menu-focused-item` | Mixin applied to the focused item | `{}` |
 
65
| `--paper-menu-focused-item-after` | Mixin applied to the ::after pseudo-element for the focused item | `{}` |
 
66
 
 
67
### Accessibility
 
68
 
 
69
`<paper-menu>` has `role="menu"` by default. A multi-select menu will also have
 
70
`aria-multiselectable` set. It implements key bindings to navigate through the menu with the up and
 
71
down arrow keys, esc to exit the menu, and enter to activate a menu item. Typing the first letter
 
72
of a menu item will also focus it.
 
73
 
 
74
 
 
75
 
 
76
##&lt;paper-submenu&gt;
 
77
 
 
78
`<paper-submenu>` is a nested menu inside of a parent `<paper-menu>`. It
 
79
consists of a trigger that expands or collapses another `<paper-menu>`:
 
80
 
 
81
```html
 
82
<paper-menu>
 
83
  <paper-submenu>
 
84
    <paper-item class="menu-trigger">Topics</paper-item>
 
85
    <paper-menu class="menu-content">
 
86
      <paper-item>Topic 1</paper-item>
 
87
      <paper-item>Topic 2</paper-item>
 
88
      <paper-item>Topic 3</paper-item>
 
89
    </paper-menu>
 
90
  </paper-submenu>
 
91
  <paper-submenu>
 
92
    <paper-item class="menu-trigger">Faves</paper-item>
 
93
    <paper-menu class="menu-content">
 
94
      <paper-item>Fave 1</paper-item>
 
95
      <paper-item>Fave 2</paper-item>
 
96
    </paper-menu>
 
97
  </paper-submenu>
 
98
  <paper-submenu disabled>
 
99
    <paper-item class="menu-trigger">Unavailable</paper-item>
 
100
    <paper-menu class="menu-content">
 
101
      <paper-item>Disabled 1</paper-item>
 
102
      <paper-item>Disabled 2</paper-item>
 
103
    </paper-menu>
 
104
  </paper-submenu>
 
105
</paper-menu>
 
106
```
 
107
 
 
108
Just like in `<paper-menu>`, the focused item is highlighted, and the selected
 
109
item has bolded text. Please see the `<paper-menu>` docs for which attributes
 
110
(such as `multi` and `selected`), and styling options are available for the
 
111
`menu-content` menu.
 
112
 
 
113