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

14
src/menu/README.md
View File

@ -29,10 +29,10 @@ To use any MDL component, you must include the minified CSS and JavaScript files
<li>Pause</li> <li>Pause</li>
</ul> </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 ```html
<button id="menu1" class="mdl-button mdl-js-button mdl-button--icon"> <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> </button>
``` ```
&nbsp;5. Add one or more MDL classes, separated by spaces, to the unordered list and the list items using the `class` attribute. &nbsp;5. Add one or more MDL classes, separated by spaces, to the unordered list and the list items using the `class` attribute.
@ -50,7 +50,7 @@ The menu component is ready for use.
A menu with three options. A menu with three options.
```html ```html
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon"> <button id="menu-speed" 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> </button>
<ul class="mdl-menu mdl-js-menu" for="menu-speed"> <ul class="mdl-menu mdl-js-menu" for="menu-speed">
<li class="mdl-menu__item">Fast</li> <li class="mdl-menu__item">Fast</li>
@ -61,7 +61,7 @@ A menu with three options.
A menu with three options, with ripple effect on button and option links. A menu with three options, with ripple effect on button and option links.
```html ```html
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon"> <button id="menu-speed" 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> </button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="menu-speed"> <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">Fast</li>
@ -72,7 +72,7 @@ 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. A menu with three options, the second of which is disabled by default.
```html ```html
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon"> <button id="menu-speed" 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> </button>
<ul class="mdl-menu mdl-js-menu" for="menu-speed"> <ul class="mdl-menu mdl-js-menu" for="menu-speed">
<li class="mdl-menu__item">Fast</li> <li class="mdl-menu__item">Fast</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-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-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-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` | 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-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 | | `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--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 | | `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>` >**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. >This attribute may be added or removed programmatically via scripting.