google/material-design-lite
1
1
Fork 0
mirror of https://github.com/google/material-design-lite.git synced 2024-09-11 12:25:38 +03:00
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/mdl-1.0'

Browse Source 
Conflicts:
	gulpfile.babel.js
	package.json
	templates/article/index.html
	templates/blog/index.html
	templates/dashboard/index.html
	templates/text-only/index.html
This commit is contained in:
Surma 2015-10-07 11:41:48 +01:00
commit 0566f444a8
45 changed files with 126 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -1,6 +1,6 @@
{
"name": "material-design-lite",
"version": "1.0.4",
"version": "1.0.5",
"homepage": "https://github.com/google/material-design-lite",
"authors": [
"Material Design Lite team"

12
docs/_templates/customize.html vendored
View File

@ -9,13 +9,13 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3.2"/>
<feOffset dx="0" dy="0" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,1)"/>
<feComposite in2="offsetblur" operator="in"/>
<feGaussianBlur in="SourceAlpha" stdDeviation="3.2" />
<feOffset dx="0" dy="0" result="offsetblur" />
<feFlood flood-color="rgba(0,0,0,1)" />
<feComposite in2="offsetblur" operator="in" />
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>

2
docs/_templates/layout.html vendored
View File

@ -27,7 +27,7 @@
<meta name="theme-color" content="#263238">
<link rel="shortcut icon" href="{{page.include_prefix}}assets/favicon.png" />
<link rel="shortcut icon" href="{{page.include_prefix}}assets/favicon.png">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">

2
docs/_templates/snippets.html vendored
View File

@ -37,6 +37,6 @@ body {
background: #fafafa;
position: relative;
}
&lt;/style&gt;</div>{% endif %}<form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
&lt;/style&gt;</div>{% endif %}<form class="codepen-button" action="http://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>

2
docs/_templates/started.html vendored
View File

@ -219,7 +219,7 @@ gulp</code></pre>
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);
&lt;/script&gt;</code><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
&lt;/script&gt;</code><form class="codepen-button" action="http://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</section>

4
package.json
View File

@ -1,7 +1,7 @@
{
"name": "material-design-lite",
"version": "1.0.4",
"description": "Material Design components in CSS, JS and HTML",
"version": "1.0.5",
"description": "Material Design Components in CSS, JS and HTML",
"private": true,
"license": "Apache-2.0",
"author": "Google",

4
src/INTRODUCTION.md
View File

@ -29,8 +29,8 @@ That's it! You are now ready to use the MDL components.
### Use the components
In general, follow these basic steps to use an MDL component in your HTML page.
1. Start with a standard HTML element, such as `<button>`, `<div>`, or `<ul>`, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification.<br/><br/>
2. Add one or more MDL-specific CSS classes to the element, such as `mdl-button` or `mdl-tabs__panel` again depending on the component. The classes apply the MDL enhancements to the element and effectively turn it into an MDL component.<br/><br/>
1. Start with a standard HTML element, such as `<button>`, `<div>`, or `<ul>`, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification.<br><br>
2. Add one or more MDL-specific CSS classes to the element, such as `mdl-button` or `mdl-tabs__panel` again depending on the component. The classes apply the MDL enhancements to the element and effectively turn it into an MDL component.<br><br>
3. View the page, preferably in multiple browsers on multiple devices, to ensure that the component looks and behaves as expected.
>**A note about HTML elements and MDL CSS classes**

2
src/card/README.md
View File

@ -77,7 +77,7 @@ A card (no shadow) with a title, image, text, and action.
```html
<div class="mdl-card">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Auckland Sky Tower<br/>Auckland, New Zealand</h2>
<h2 class="mdl-card__title-text">Auckland Sky Tower<br>Auckland, New Zealand</h2>
</div>
<div class="mdl-card__media">
<img src="skytower.jpg" width="173" height="157" border="0" alt=""

10
src/checkbox/README.md
View File

@ -19,20 +19,20 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;2. Inside the label, code an `<input>` element and give it a `type` attribute whose value is `"checkbox"`. Also give it an `id` attribute whose value matches the label's `for` attribute value.
```html
<label for="chkbox1">
<input type="checkbox" id="chkbox1" />
<input type="checkbox" id="chkbox1">
</label>
```
&nbsp;3. Also inside the label, after the checkbox, code a `<span>` element containing the checkbox's text caption.
```html
<label for="chkbox1">
<input type="checkbox" id="chkbox1" />
<input type="checkbox" id="chkbox1">
<span>Enable AutoSave</span>
</label>
```
&nbsp;4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the `class` attribute.
```html
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox">
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input" />
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Enable AutoSave</span>
</label>
```
@ -45,7 +45,7 @@ A checkbox with a ripple click effect.
```html
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input" />
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Enable AutoSave</span>
</label>
```
@ -61,5 +61,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-checkbox__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (checkbox) |
>**Note:** Disabled versions of all the available checkbox types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled />`
>**Note:** Disabled versions of all the available checkbox types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled>`
>This attribute may be added or removed programmatically via scripting.

2
src/checkbox/snippets/check-off.html
View File

@ -1,4 +1,4 @@
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" />
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Checkbox</span>
</label>

2
src/checkbox/snippets/check-on.html
View File

@ -1,4 +1,4 @@
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked />
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Checkbox</span>
</label>

10
src/icon-toggle/README.md
View File

@ -19,20 +19,20 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;2. Inside the label, code an `<input>` element and give it a `type` attribute whose value is `"checkbox"`. Also give it an `id` attribute whose value matches the label's `for` attribute value.
```html
<label for="icon-toggle-1">
<input type="checkbox" id="icon-toggle-1" />
<input type="checkbox" id="icon-toggle-1">
</label>
```
&nbsp;3. Also inside the label, after the input element, code an `<i>` element containing the icon-toggle's desired icon.
```html
<label for="icon-toggle-1">
<input type="checkbox" id="icon-toggle-1" />
<input type="checkbox" id="icon-toggle-1">
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>
```
&nbsp;4. Add one or more MDL classes, separated by spaces, to the label and input elements, using the `class` attribute.
```html
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" />
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input">
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>
```
@ -45,7 +45,7 @@ An icon-toggle with a ripple click effect.
```html
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" />
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input">
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>
```
@ -61,5 +61,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-icon-toggle__label` | Applies basic MDL behavior to caption | Required on i element (icon) |
| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (icon-toggle) |
>**Note:** Disabled versions of all available input types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="icon-toggle-5" class="mdl-icon-toggle__input" disabled />`
>**Note:** Disabled versions of all available input types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="icon-toggle-5" class="mdl-icon-toggle__input" disabled>`
>This attribute may be added or removed programmatically via scripting.

2
src/icon-toggle/snippets/icon-off.html
View File

@ -1,4 +1,4 @@
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
<input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input" />
<input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input">
<i class="mdl-icon-toggle__label material-icons">format_italic</i>
</label>

2
src/icon-toggle/snippets/icon-on.html
View File

@ -1,4 +1,4 @@
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked />
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked>
<i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>

2
src/layout/_layout.scss
View File

@ -254,7 +254,7 @@
min-height: $layout-mobile-header-height;
}
.mdl-layout--fixed-drawer:not(.is-small-screen) > & {
.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > & {
margin-left: $layout-drawer-width;
width: calc(100% - #{$layout-drawer-width});
}

2
src/layout/snippets/fixed-header-drawer.html
View File

@ -13,7 +13,7 @@
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="fixed-header-drawer-exp" />
id="fixed-header-drawer-exp">
</div>
</div>
</div>

2
src/layout/snippets/waterfall-header.html
View File

@ -20,7 +20,7 @@
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="waterfall-exp" />
id="waterfall-exp">
</div>
</div>
</div>

8
src/radio/README.md
View File

@ -19,20 +19,20 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;2. Inside the label, code an `<input>` element and give it a `type` attribute whose value is `"radio"`. Also give it an `id` attribute whose value matches the label's `for` attribute value, and a `name` attribute whose value identifies the radio button group. Optionally, give it a `value` attribute whose value provides some information about the radio button for scripting purposes.
```html
<label for="radio1">
<input type="radio" id="radio1" name="flash" value="on" />
<input type="radio" id="radio1" name="flash" value="on">
</label>
```
&nbsp;3. Also inside the label, after the radio button, code a `<span>` element containing the radio button's text caption.
```html
<label for="radio1">
<input type="radio" id="radio1" name="flash" value="on" />
<input type="radio" id="radio1" name="flash" value="on">
<span>Always on</span>
</label>
```
&nbsp;4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the `class` attribute.
```html
<label for="radio1" class="mdl-radio mdl-js-radio">
<input type="radio" id="radio1" name="flash" value="on" class="mdl-radio__button" />
<input type="radio" id="radio1" name="flash" value="on" class="mdl-radio__button">
<span class="mdl-radio__label">Always on</span>
</label>
```
@ -72,5 +72,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-radio__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (radio button) |
>**Note:** Disabled versions of all the available radio button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="radio" id="radio5" name="flash" class="mdl-radio__button" disabled />`
>**Note:** Disabled versions of all the available radio button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="radio" id="radio5" name="flash" class="mdl-radio__button" disabled>`
>This attribute may be added or removed programmatically via scripting.

2
src/radio/snippets/radio-off.html
View File

@ -1,4 +1,4 @@
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2" />
<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
<span class="mdl-radio__label">Second</span>
</label>

2
src/radio/snippets/radio-on.html
View File

@ -1,4 +1,4 @@
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked />
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
<span class="mdl-radio__label">First</span>
</label>

8
src/slider/README.md
View File

@ -21,13 +21,13 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;2. Inside the paragraph container, code an `<input>` element and give it a `type` attribute whose value is `"range"`. Also give it an `id` attribute to make it available for scripting, and `min` and `max` attributes whose values specify the slider's range. Give it a `value` attribute whose value sets the initial thumb position (optional; if omitted, defaults to 50% of the maximum), and a `step` attribute whose value specifies the increment by which the thumb moves (also optional; if omitted, defaults to 1). Finally, give it an event handler to be executed when the user changes the slider's value.
```html
<p style="width:300px">
<input type="range" id="s1" min="0" max="10" value="4" step="2" />
<input type="range" id="s1" min="0" max="10" value="4" step="2">
</p>
```
&nbsp;3. Add one or more MDL classes, separated by spaces, to the slider using the `class` attribute.
```html
<p style="width:300px">
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" />
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
</p>
```
@ -37,7 +37,7 @@ The slider component is ready for use.
A slider that controls volume.
```html
<p style="width:300px">
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" />
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
</p>
```
@ -49,7 +49,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-slider` | Defines input element as an MDL component | Required |
| `mdl-js-slider` | Assigns basic MDL behavior to input element | Required |
>**Note:** A disabled version of the slider is provided, and is invoked with the standard HTML boolean attribute `disabled`. `<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled />`
>**Note:** A disabled version of the slider is provided, and is invoked with the standard HTML boolean attribute `disabled`. `<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled>`
>This attribute may be added or removed programmatically via scripting.
>**Note:** Although the *value* attribute is used to set a slider's initial value, it should not be used

4
src/slider/snippets/demo.html
View File

@ -1,10 +1,10 @@
<div class="demo-preview-block">
<p>
<input class="mdl-slider mdl-js-slider" type="range"
min="0" max="100" value="0" tabindex="0"/>
min="0" max="100" value="0" tabindex="0">
</p>
<p>
<input class="mdl-slider mdl-js-slider" type="range"
min="0" max="100" value="10" tabindex="0"/>
min="0" max="100" value="10" tabindex="0">
</p>
</div>

2
src/slider/snippets/slider-default.html
View File

@ -1,3 +1,3 @@
<!-- Default Slider -->
<input class="mdl-slider mdl-js-slider" type="range"
min="0" max="100" value="0" tabindex="0"/>
min="0" max="100" value="0" tabindex="0">

2
src/slider/snippets/slider-starting-value.html
View File

@ -1,3 +1,3 @@
<!-- Slider with Starting Value -->
<input class="mdl-slider mdl-js-slider" type="range"
min="0" max="100" value="25" tabindex="0"/>
min="0" max="100" value="25" tabindex="0">

10
src/switch/README.md
View File

@ -19,20 +19,20 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;2. Inside the label, code an `<input>` element and give it a `type` attribute whose value is `"checkbox"`. Also give it an `id` attribute whose value matches the label's `for` attribute value.
```html
<label for="switch1">
<input type="checkbox" id="switch1" />
<input type="checkbox" id="switch1">
</label>
```
&nbsp;3. Also inside the label, after the checkbox, code a `<span>` element containing the switch's text caption.
```html
<label for="switch1">
<input type="checkbox" id="switch1" />
<input type="checkbox" id="switch1">
<span>Sound off/on</span>
</label>
```
&nbsp;4. Add one or more MDL classes, separated by spaces, to the label, switch, and caption using the `class` attribute.
```html
<label for="switch1" class="mdl-switch mdl-js-switch">
<input type="checkbox" id="switch1" class="mdl-switch__input" />
<input type="checkbox" id="switch1" class="mdl-switch__input">
<span class="mdl-switch__label">Sound off/on</span>
</label>
```
@ -45,7 +45,7 @@ A switch with a ripple click effect.
```html
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch1" class="mdl-switch__input" />
<input type="checkbox" id="switch1" class="mdl-switch__input">
<span class="mdl-switch__label">Sound off/on</span>
</label>
```
@ -61,5 +61,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-switch__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (switch) |
>**Note:** Disabled versions of all available switch types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="switch5" class="mdl-switch__input" disabled />`
>**Note:** Disabled versions of all available switch types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="switch5" class="mdl-switch__input" disabled>`
>This attribute may be added or removed programmatically via scripting.

2
src/switch/snippets/switch-off.html
View File

@ -1,4 +1,4 @@
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input" />
<input type="checkbox" id="switch-2" class="mdl-switch__input">
<span class="mdl-switch__label"></span>
</label>

2
src/switch/snippets/switch-on.html
View File

@ -1,4 +1,4 @@
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked />
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label"></span>
</label>

26
src/textfield/README.md
View File

@ -21,20 +21,20 @@ There are three main types of text fields in the text field component, each with
&nbsp;2. Inside the div, code an `<input>` element with a `type` attribute of `"text"` (the text field), and an `id` attribute of your choice.
```html
<div>
<input type="text" id="user" />
<input type="text" id="user">
</div>
```
&nbsp;3. Also inside the div, after the text field, code a `<label>` element with a `for` attribute whose value matches the `input` element's `id` value, and a short string to be used as the field's placeholder text.
```html
<div>
<input type="text" id="user" />
<input type="text" id="user">
<label for="user">User name</label>
</div>
```
&nbsp;4. Optionally, add a `pattern` attribute and value to the `<input>` element (see the [W3C HTML5 forms specification](http://www.w3.org/TR/html5/forms.html#the-pattern-attribute) for details) and an associated error message in a `<span>` element following the `<label>`.
```html
<div>
<input type="text" id="user" pattern="[A-Z,a-z, ]*" />
<input type="text" id="user" pattern="[A-Z,a-z, ]*">
<label for="user">User name</label>
<span>Letters and spaces only</span>
</div>
@ -42,7 +42,7 @@ There are three main types of text fields in the text field component, each with
&nbsp;5. Add one or more MDL classes, separated by spaces, to the div container, text field, field label, and error message using the `class` attribute.
```html
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*" />
<input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*">
<label class="mdl-textfield__label" for="user">User name</label>
<span class="mdl-textfield__error">Letters and spaces only</span>
</div>
@ -54,7 +54,7 @@ The single-line text field component is ready for use.
Single-line text field with a standard label.
```html
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="fname" />
<input class="mdl-textfield__input" type="text" id="fname">
<label class="mdl-textfield__label" for="fname">First name</label>
</div>
```
@ -62,7 +62,7 @@ Single-line text field with a standard label.
Single-line text field with a floating label.
```html
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="addr1" />
<input class="mdl-textfield__input" type="text" id="addr1">
<label class="mdl-textfield__label" for="addr1">Address line 1</label>
</div>
```
@ -70,7 +70,7 @@ Single-line text field with a floating label.
Single-line text field with a standard label, pattern matching, and error message.
```html
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone" />
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
<label class="mdl-textfield__label" for="phone">Phone</label>
<span class="mdl-textfield__error">Digits only</span>
</div>
@ -176,7 +176,7 @@ Multi-line text field with multiple visible input lines and a maximum number of
<span></span>
</label>
<div>
<input type="text" id="expando1" />
<input type="text" id="expando1">
</div>
</div>
```
@ -187,7 +187,7 @@ Multi-line text field with multiple visible input lines and a maximum number of
<span></span>
</label>
<div>
<input type="text" id="expando1" />
<input type="text" id="expando1">
<label for="expando1">Expandable text field</label>
</div>
</div>
@ -199,7 +199,7 @@ Multi-line text field with multiple visible input lines and a maximum number of
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="expando1" />
<input class="mdl-textfield__input" type="text" id="expando1">
<label class="mdl-textfield__label" for="expando1">Expandable text field</label>
</div>
</div>
@ -216,7 +216,7 @@ Expandable text field with a standard label.
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search-expandable" />
<input class="mdl-textfield__input" type="text" id="search-expandable">
<label class="mdl-textfield__label" for="search-expandable">Search text</label>
</div>
</div>
@ -230,7 +230,7 @@ Expandable text field with a floating label.
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search-expandable2" />
<input class="mdl-textfield__input" type="text" id="search-expandable2">
<label class="mdl-textfield__label" for="search-expandable2">
Enter search text below
</label>
@ -256,5 +256,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
(1) The "search" 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).
>**Note:** Disabled versions of each text field type are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input class="mdl-textfield mdl-js-textfield" type="text" disabled />`
>**Note:** Disabled versions of each text field type are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input class="mdl-textfield mdl-js-textfield" type="text" disabled>`
>This attribute may be added or removed programmatically via scripting.

2
src/textfield/snippets/textfield-expanding.html
View File

@ -5,7 +5,7 @@
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="sample6" />
<input class="mdl-textfield__input" type="text" id="sample6">
<label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
</div>
</div>

2
src/textfield/snippets/textfield-floating-numeric.html
View File

@ -1,7 +1,7 @@
<!-- Numeric Textfield with Floating Label -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4" />
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
<label class="mdl-textfield__label" for="sample4">Number...</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>

2
src/textfield/snippets/textfield-floating-text.html
View File

@ -2,7 +2,7 @@
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" />
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>

2
src/textfield/snippets/textfield-numeric.html
View File

@ -1,7 +1,7 @@
<!-- Numeric Textfield -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2" />
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2">
<label class="mdl-textfield__label" for="sample2">Number...</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>

2
src/textfield/snippets/textfield-text.html
View File

@ -1,7 +1,7 @@
<!-- Simple Textfield -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample1" />
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
</form>

12
src/textfield/textfield.js
View File

@ -142,10 +142,12 @@
* @public
*/
MaterialTextfield.prototype.checkValidity = function() {
if (this.input_.validity.valid) {
this.element_.classList.remove(this.CssClasses_.IS_INVALID);
} else {
this.element_.classList.add(this.CssClasses_.IS_INVALID);
if (this.input_.validity) {
if (this.input_.validity.valid) {
this.element_.classList.remove(this.CssClasses_.IS_INVALID);
} else {
this.element_.classList.add(this.CssClasses_.IS_INVALID);
}
}
};
MaterialTextfield.prototype['checkValidity'] =
@ -198,6 +200,8 @@
if (value) {
this.input_.value = value;
} else {
this.input_.value = '';
}
this.updateClasses_();
};

2
templates/android-dot-com/index.html
View File

@ -56,7 +56,7 @@
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search-field" />
<input class="mdl-textfield__input" type="text" id="search-field">
</div>
</div>
<!-- Navigation -->

4
templates/article/index.html
View File

@ -37,7 +37,7 @@
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="shortcut icon" href="images/favicon.png">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
@ -71,7 +71,7 @@
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search" />
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>

BIN
templates/blog/images/bg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

BIN
templates/blog/images/bg_1024.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
templates/blog/images/bg_2048.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 257 KiB

BIN
templates/blog/images/bg_2880.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 503 KiB

2
templates/blog/index.html
View File

@ -37,7 +37,7 @@
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="shortcut icon" href="images/favicon.png">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--

20
templates/blog/styles.css
View File

@ -1,5 +1,4 @@
body::before {
background-image: url('images/bg.jpg');
background-size: cover;
background-attachment: fixed;
content: '';
@ -11,7 +10,24 @@ body::before {
top: 0;
position: fixed;
}
@media (max-width: 512px) and (min-resolution: 1.5dppx),
(max-width: 1024px) and (max-resolution: 1.5dppx) {
body::before {
background-image: url('images/bg_1024.jpg');
}
}
@media (min-width: 513px) and (max-width: 1024px) and (min-resolution: 1.5dppx),
(min-width: 1025px) and (max-width: 2048px) and (max-resolution: 1.5dppx) {
body::before {
background-image: url('images/bg_2048.jpg');
}
}
@media (min-width: 1025px) and (min-resolution: 1.5dppx),
(min-width: 2049px) and (max-resolution: 1.5dppx) {
body::before {
background-image: url('images/bg_2880.jpg');
}
}
body .demo-blog {
font-family: 'Roboto', 'Helvetica', sans-serif;
}

46
templates/dashboard/index.html
View File

@ -37,7 +37,7 @@
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="shortcut icon" href="images/favicon.png">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
@ -71,7 +71,7 @@
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search" />
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
@ -120,28 +120,28 @@
<div class="mdl-grid demo-content">
<div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<use xlink:href="#piechart" mask="url(#piemask)">
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan font-size="0.2" dy="-0.07">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<use xlink:href="#piechart" mask="url(#piemask)">
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<use xlink:href="#piechart" mask="url(#piemask)">
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<use xlink:href="#piechart" mask="url(#piemask)">
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
</div>
<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
<use xlink:href="#chart"/>
<use xlink:href="#chart">
</svg>
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
<use xlink:href="#chart"/>
<use xlink:href="#chart">
</svg>
</div>
<div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing">
@ -163,25 +163,25 @@
<ul>
<li>
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input" />
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Click per object</span>
</label>
</li>
<li>
<label for="chkbox2" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox2" class="mdl-checkbox__input" />
<input type="checkbox" id="chkbox2" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Views per object</span>
</label>
</li>
<li>
<label for="chkbox3" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox3" class="mdl-checkbox__input" />
<input type="checkbox" id="chkbox3" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Objects selected</span>
</label>
</li>
<li>
<label for="chkbox4" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox4" class="mdl-checkbox__input" />
<input type="checkbox" id="chkbox4" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Objects viewed</span>
</label>
</li>
@ -200,12 +200,12 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
<defs>
<mask id="piemask" maskContentUnits="objectBoundingBox">
<circle cx=0.5 cy=0.5 r=0.49 fill="white" />
<circle cx=0.5 cy=0.5 r=0.40 fill="black" />
<circle cx=0.5 cy=0.5 r=0.49 fill="white">
<circle cx=0.5 cy=0.5 r=0.40 fill="black">
</mask>
<g id="piechart">
<circle cx=0.5 cy=0.5 r=0.5 />
<path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)" />
<circle cx=0.5 cy=0.5 r=0.5>
<path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)">
</g>
</defs>
</svg>
@ -213,11 +213,11 @@
<defs>
<g id="chart">
<g id="Gridlines">
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3"/>
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7"/>
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3"/>
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7"/>
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3"/>
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3">
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7">
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3">
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7">
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3">
</g>
<g id="Numbers">
<text transform="matrix(1 0 0 1 485 29.3333)" fill="#888888" font-family="'Roboto'" font-size="9">500</text>
@ -235,11 +235,11 @@
</g>
<g id="Layer_5">
<polygon opacity="0.36" stroke-miterlimit="10" points="0,223.3 48,138.5 154.7,169 211,88.5
294.5,80.5 380,165.2 437,75.5 469.5,223.3 "/>
294.5,80.5 380,165.2 437,75.5 469.5,223.3 ">
</g>
<g id="Layer_4">
<polygon stroke-miterlimit="10" points="469.3,222.7 1,222.7 48.7,166.7 155.7,188.3 212,132.7
296.7,128 380.7,184.3 436.7,125 "/>
296.7,128 380.7,184.3 436.7,125 ">
</g>
</g>
</defs>

2
templates/text-only/index.html
View File

@ -37,7 +37,7 @@
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="shortcut icon" href="images/favicon.png">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--

2
test/index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mocha Test Runner</title>
<link rel="stylesheet" href="../node_modules/mocha/mocha.css">
<link rel="stylesheet" href="../dist/material.css"/>
<link rel="stylesheet" href="../dist/material.css">
</head>
<body>
<div id="mocha"></div>