google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update menu docs

master
Addy Osmani 2015-06-08 10:56:04 +01:00
parent b118034737
commit 5c02baacd3
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/menu/README.md
View File

@ -3,7 +3,7 @@
##Introduction
The Material Design Lite (MDL) **menu** component is a user interface element that allows users to select one of a number of options. The selection typically results in an action initiation, a setting change, or other observable effect. Menu options are always presented in sets of two or more, and options may be programmatically enabled or disabled as required. The menu appears when the user is asked to choose among a series of options, and is usually dismissed after the choice is made.
Menus are an established but non-standardized feature in user interfaces, and allow users to make choices that direct the activity, progress, or characteristics of software. Their design and use is an important factor in the overall user experience. See the menu component's [Material Design specifications page](http://www.google.com/design/spec/components/menus.html) for details.
Menus are an established but non-standardized feature in user interfaces, and allow users to make choices that direct the activity, progress, or characteristics of software. Their design and use is an important factor in the overall user experience. See the menu component's [Material Design specifications page](http://www.google.com/design/spec/components/menus.html) for details.
##Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction.
@ -29,10 +29,10 @@ To use any MDL component, you must include the minified CSS and JavaScript files
<li>Pause</li>
</ul>
```
&nbsp;4. Add one or more MDL classes, separated by spaces, to the button element using the `class` attribute.
&nbsp;4. Add one or more MDL classes, separated by spaces, to the button and span elements using the `class` attribute.
```html
<button id="menu1" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
<span class="mdl-icon mdl-icon--more-vert"/>
</button>
```
&nbsp;5. Add one or more MDL classes, separated by spaces, to the unordered list and the list items using the `class` attribute.
@ -50,8 +50,8 @@ The menu component is ready for use.
A menu with three options.
```html
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<span class="mdl-icon mdl-icon--more-vert"/>
</button>
<ul class="mdl-menu mdl-js-menu" for="menu-speed">
<li class="mdl-menu__item">Fast</li>
<li class="mdl-menu__item">Medium</li>
@ -61,8 +61,8 @@ A menu with three options.
A menu with three options, with ripple effect on button and option links.
```html
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<span class="mdl-icon mdl-icon--more-vert"/>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="menu-speed">
<li class="mdl-menu__item">Fast</li>
<li class="mdl-menu__item">Medium</li>
@ -72,8 +72,8 @@ A menu with three options, with ripple effect on button and option links.
A menu with three options, the second of which is disabled by default.
```html
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<span class="mdl-icon mdl-icon--more-vert"/>
</button>
<ul class="mdl-menu mdl-js-menu" for="menu-speed">
<li class="mdl-menu__item">Fast</li>
<li class="mdl-menu__item" disabled>Medium</li>
@ -89,6 +89,8 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-button` | Defines button as an MDL component | Required on button element |
| `mdl-js-button` | Assigns basic MDL behavior to button | Required on button element |
| `mdl-button--icon` | Applies *icon* (small plain circular) display effect to button | Required on button element |
| `mdl-icon` | Defines span as an MDL icon component | Required on span element |
| `mdl-icon--more-vert` | Defines span as an MDL vertical ellipsis icon(1) | Required on span element |
| `mdl-menu` | Defines an unordered list container as an MDL component | Required on ul element |
| `mdl-menu__item` | Defines buttons as MDL menu options and assigns basic MDL behavior | Required on list item elements |
| `mdl-js-ripple-effect` | Applies *ripple* click effect to option links | Optional; goes on unordered list element |
@ -97,7 +99,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-menu--top-right` | Positions menu above button, aligns right edge of menu with button | Optional; goes on unordered list element |
| `mdl-menu--bottom-right` | Positions menu below button, aligns right edge of menu with button | Optional; goes on unordered list element |
(1) The "more_vert" icon is used here as an example. Other icons can be used by modifying the text. For a list of available icons, see [this page](https://www.google.com/design/icons).
(1) The "more-vert" icon class is used here as an example. Other icons can be used by modifying the class name. For a list of available icons, see [this page](http://google.github.io/web-starter-kit/latest/styleguide/icons/demo.html); hover over an icon to see its class name.
>**Note:** Disabled versions of the menu options are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<li class="mdl-menu__item" disabled>Medium</li>`
>This attribute may be added or removed programmatically via scripting.