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

Merge pull request #1734 from google/issue-1722

Browse Source 
Add namespaced alternatives for what is strictly speaking invalid HTML
This commit is contained in:
Surma 2015-10-13 12:10:29 +01:00
commit e91adf21c4
3 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/menu/README.md
View File

@ -8,7 +8,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
### To include an MDL **menu** component:
&nbsp;1. Code a `<button>` element; this is the clickable toggle that will show and hide the menu options. Include an `id` attribute whose value will match the `for` (or `data-for`) attribute of the unordered list coded in the next step. Inside the button, code a `<i>` or `<span>` element to contain an icon of your choice.
&nbsp;1. Code a `<button>` element; this is the clickable toggle that will show and hide the menu options. Include an `id` attribute whose value will match the `for` (or `data-mdl-for`) attribute of the unordered list coded in the next step. Inside the button, code a `<i>` or `<span>` element to contain an icon of your choice.
```html
<button id="menu1">
<i></i>
@ -101,5 +101,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
(2) The `i` or `span` element in "button"" element can be used interchangeably.
>**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` or `data-mdl-disabled`. `<li class="mdl-menu__item" disabled>Medium</li>`
>This attribute may be added or removed programmatically via scripting.

2
src/menu/_menu.scss
View File

@ -151,7 +151,7 @@
border: 0;
}
&[disabled] {
&[disabled], &[data-mdl-disabled] {
color: $disabled-item-text-color;
background-color: transparent;
cursor: auto;

2
src/menu/menu.js
View File

@ -113,7 +113,7 @@
// Find the "for" element and bind events to it.
var forElId = this.element_.getAttribute('for') ||
this.element_.getAttribute('data-for');
this.element_.getAttribute('data-mdl-for');
var forEl = null;
if (forElId) {
forEl = document.getElementById(forElId);