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

Updated docs to fix for recent updates.

master
Jonathan Garbee 2015-06-08 08:22:09 -04:00
parent f7199e4634
commit d2995fa0b7
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/menu/README.md
View File

@ -32,7 +32,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
 4. Add one or more MDL classes, separated by spaces, to the button and span elements using the `class` attribute.  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">
<span class="mdl-icon mdl-icon--more-vert"/> <i class="material-icons">more_vert</i>
</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">
<span class="mdl-icon mdl-icon--more-vert"/> <i class="material-icons">more_vert</i>
</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">
<span class="mdl-icon mdl-icon--more-vert"/> <i class="material-icons">more_vert</i>
</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">
<span class="mdl-icon mdl-icon--more-vert"/> <i class="material-icons">more_vert</i>
</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,8 +89,7 @@ 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 | | `material-icons` | Defines span as a material icon | Required on an inline 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 |

17
src/shadow/README.md
View File

@ -20,7 +20,7 @@ Some content
``` ```
&nbsp;2. Add an MDL shadow class to the element using the `class` attribute. &nbsp;2. Add an MDL shadow class to the element using the `class` attribute.
```html ```html
<div class="mdl-shadow--z3"> <div class="mdl-shadow--4dp">
Some content Some content
</div> </div>
``` ```
@ -32,13 +32,13 @@ The shadowed component is ready for use.
A div with a user-specified class and a small shadow. A div with a user-specified class and a small shadow.
```html ```html
<div class="my-shadow-card mdl-shadow--z1">Small shadow</div> <div class="my-shadow-card mdl-shadow--2dp">Small shadow</div>
``` ```
A div with a user-specified class and a medium-large shadow. A div with a user-specified class and a medium-large shadow.
```html ```html
<div class="my-shadow-card mdl-shadow--z4">Medium-large shadow</div> <div class="my-shadow-card mdl-shadow--6dp">Medium-large shadow</div>
``` ```
##Configuration options ##Configuration options
@ -46,11 +46,12 @@ The MDL CSS classes apply various predefined visual shadows to the element. The
| MDL class | Effect | Remarks | | MDL class | Effect | Remarks |
|-----------|--------|---------| |-----------|--------|---------|
| `mdl-shadow--z1` | Assigns a small shadow to the object | Optional; if omitted, no shadow is present | | `mdl-shadow--2dp` | Assigns a small shadow to the object | Optional; if omitted, no shadow is present |
| `mdl-shadow--z2` | Assigns a medium-small shadow to the object | Optional; if omitted, no shadow is present | | `mdl-shadow--3dp` | Assigns a medium-small shadow to the object | Optional; if omitted, no shadow is present |
| `mdl-shadow--z3` | Assigns a medium shadow to the object | Optional; if omitted, no shadow is present | | `mdl-shadow--4dp` | Assigns a medium shadow to the object | Optional; if omitted, no shadow is present |
| `mdl-shadow--z4` | Assigns a medium-large shadow to the object | Optional; if omitted, no shadow is present | | `mdl-shadow--6dp` | Assigns a medium-large shadow to the object | Optional; if omitted, no shadow is present |
| `mdl-shadow--z5` | Assigns a large shadow to the object | Optional; if omitted, no shadow is present | | `mdl-shadow--8dp` | Assigns a large shadow to the object | Optional; if omitted, no shadow is present |
| `mdl-shadow--16dp` | Assigns an extra-large shadow to the object | Optional; if omitted, no shadow is present|
##More information ##More information
For working examples of the **shadow** effect, see the MDL [shadow demo page](www.github.com/google/material-design-lite/src/shadow/demo.html). Also see the MDL [card demo page](www.github.com/google/material-design-lite/src/card/demo.html). For working examples of the **shadow** effect, see the MDL [shadow demo page](www.github.com/google/material-design-lite/src/shadow/demo.html). Also see the MDL [card demo page](www.github.com/google/material-design-lite/src/card/demo.html).