Merge branch 'mdl-1.0'
Sérgio Gomes
commit
5363c5df4d
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "material-design-lite",
|
||||
"version": "1.0.5",
|
||||
"version": "1.0.6",
|
||||
"homepage": "https://github.com/google/material-design-lite",
|
||||
"authors": [
|
||||
"Material Design Lite team"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "material-design-lite",
|
||||
"version": "1.0.5",
|
||||
"version": "1.0.6",
|
||||
"description": "Material Design Components in CSS, JS and HTML",
|
||||
"private": true,
|
||||
"license": "Apache-2.0",
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@ $layout-drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
|
|||
$layout-text-color: unquote("rgb(#{$palette-grey-800})") !default;
|
||||
$layout-drawer-navigation-color: #757575 !default;
|
||||
$layout-drawer-navigation-link-active-background: unquote("rgb(#{$color-light-contrast})") !default;
|
||||
$layout-drawer-navigation-link-active-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$layout-drawer-navigation-link-active-color: unquote("rgb(#{$palette-grey-300})") !default;
|
||||
|
||||
// Header
|
||||
$layout-header-bg-color: unquote("rgb(#{$color-primary})") !default;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **badge** component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.
|
||||
|
||||
You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention. For example:
|
||||
|
|
@ -11,9 +12,6 @@ A badge is almost always positioned near a link so that the user has a convenien
|
|||
|
||||
Badges are a new feature in user interfaces, and provide users with a visual clue to help them discover additional relevant content. Their design and use is therefore an important factor in the overall user experience.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **badge** component:
|
||||
|
||||
1. Code an `<a>` (anchor/link) or a `<span>` element. Include any desired attributes and content.
|
||||
|
|
@ -34,6 +32,7 @@ The badge component is ready for use.
|
|||
>**Note:** Because of the badge component's small size, the `data-badge` value should typically contain one to three characters. More than three characters will not cause an error, but some characters may fall outside the badge and thus be difficult or impossible to see. The value of the `data-badge` attribute is centered in the badge.
|
||||
|
||||
#### Examples
|
||||
|
||||
A badge inside a link.
|
||||
```html
|
||||
<a href="#" class="mdl-badge" data-badge="7">This link contains a badge.</a>
|
||||
|
|
@ -58,6 +57,7 @@ This badge has no background color.</a>
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual enhancements to the badge. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **button** component is an enhanced version of the standard HTML `<button>` element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects.
|
||||
|
||||
Buttons are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the button component's [Material Design specifications page](http://www.google.com/design/spec/components/buttons.html) for details.
|
||||
|
||||
The available button display types are *flat* (default), *raised*, *fab*, *mini-fab*, and *icon*; any of these types may be plain (light gray) or *colored*, and may be initially or programmatically *disabled*. The *fab*, *mini-fab*, and *icon* button types typically use a small image as their caption rather than text.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **button** component:
|
||||
|
||||
1. Code a `<button>` element. Include any desired attributes and values, such as an id or event handler, and add a text caption or image as appropriate.
|
||||
|
|
@ -22,6 +20,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
The button component is ready for use.
|
||||
|
||||
#### Examples
|
||||
|
||||
A button with the "raised" effect.
|
||||
```html
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
|
||||
|
|
@ -39,6 +38,7 @@ A button with the "icon" and "colored" effects.
|
|||
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the button. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **card** component is a user interface element representing a virtual piece of paper that contains related data — such as a photo, some text, and a link — that are all about a single subject.
|
||||
|
||||
Cards are a convenient means of coherently displaying related content that is composed of different types of objects. They are also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length. Cards have a constant width and a variable height, depending on their content.
|
||||
|
||||
Cards are a fairly new feature in user interfaces, and allow users an access point to more complex and detailed information. Their design and use is an important factor in the overall user experience. See the card component's [Material Design specifications page](http://www.google.com/design/spec/components/cards.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.
|
||||
|
||||
### To include an MDL **card** component:
|
||||
|
||||
1. Code a `<div>` element; this is the "outer" container, intended to hold all of the card's content.
|
||||
|
|
@ -113,6 +111,7 @@ Card (level-3 shadow) with an image, caption, and text:
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the card. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **checkbox** component is an enhanced version of the standard HTML `<input type="checkbox">` element. A checkbox consists of a small square and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Checkboxes typically, but not necessarily, appear in groups, and can be selected and deselected individually. The MDL checkbox component allows you to add display and click effects.
|
||||
|
||||
Checkboxes are a common feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the checkbox component's [Material Design specifications page](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) for details.
|
||||
|
||||
The enhanced checkbox component has a more vivid visual look than a standard checkbox, and may be initially or programmatically *disabled*.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **checkbox** component:
|
||||
|
||||
1. Code a `<label>` element and give it a `for` attribute whose value is the unique id of the checkbox it will contain. The `for` attribute is optional when the `<input>` element is contained inside the `<label>` element, but is recommended for clarity.
|
||||
|
|
@ -51,6 +49,7 @@ A checkbox with a ripple click effect.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the checkbox. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **data-table** component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities.
|
||||
|
||||
Tables are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the data-table component's [Material Design specifications page](http://www.google.com/design/spec/components/data-tables.html) for details.
|
||||
|
||||
The available row/column/cell types in a data-table are mostly self-formatting; that is, once the data-table is defined, the individual cells require very little specific attention. For example, the rows exhibit shading behavior on mouseover and selection, numeric values are automatically formatted by default, and the addition of a single class makes the table rows individually or collectively selectable. This makes the data-table component convenient and easy to code for the developer, as well as attractive and intuitive for the user.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **data-table** component:
|
||||
|
||||
1. Code a `<table>` element. Include `<thead>` and `<tbody>` elements to hold the title and data rows, respectively.
|
||||
|
|
@ -78,6 +76,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
The data-table component is ready for use.
|
||||
|
||||
#### Examples
|
||||
|
||||
A data-table with a "master" select checkbox and individual row select checkboxes.
|
||||
```html
|
||||
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
|
||||
|
|
@ -179,6 +178,7 @@ A table that has name and values for the checkboxes.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the data-table. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@
|
|||
MaterialDataTable.prototype.CssClasses_ = {
|
||||
DATA_TABLE: 'mdl-data-table',
|
||||
SELECTABLE: 'mdl-data-table--selectable',
|
||||
SELECT_ELEMENT: 'mdl-data-table__select',
|
||||
IS_SELECTED: 'is-selected',
|
||||
IS_UPGRADED: 'is-upgraded'
|
||||
};
|
||||
|
|
@ -111,10 +112,13 @@
|
|||
*/
|
||||
MaterialDataTable.prototype.createCheckbox_ = function(row, opt_rows) {
|
||||
var label = document.createElement('label');
|
||||
label.classList.add('mdl-checkbox');
|
||||
label.classList.add('mdl-js-checkbox');
|
||||
label.classList.add('mdl-js-ripple-effect');
|
||||
label.classList.add('mdl-data-table__select');
|
||||
var labelClasses = [
|
||||
'mdl-checkbox',
|
||||
'mdl-js-checkbox',
|
||||
'mdl-js-ripple-effect',
|
||||
this.CssClasses_.SELECT_ELEMENT
|
||||
];
|
||||
label.className = labelClasses.join(' ');
|
||||
var checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.classList.add('mdl-checkbox__input');
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **footer** component is a comprehensive container intended to present a substantial amount of related content in a visually attractive and logically intuitive area. Although it is called "footer", it may be placed at any appropriate location on a device screen, either before or after other content.
|
||||
|
||||
An MDL footer component takes two basic forms: *mega-footer* and *mini-footer*. As the names imply, mega-footers contain more (and more complex) content than mini-footers. A mega-footer presents multiple sections of content separated by horizontal rules, while a mini-footer presents a single section of content. Both footer forms have their own internal structures, including required and optional elements, and typically include both informational and clickable content, such as links.
|
||||
|
||||
Footers, as represented by this component, are a fairly new feature in user interfaces, and allow users to view discrete blocks of content in a coherent and consistently organized way. Their design and use is an important factor in the overall user experience.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **mega-footer** component:
|
||||
|
||||
1a. Code a `<footer>` element. Inside the footer, include one `<div>` element for each content section, typically three: *top*, *middle*, and *bottom*.
|
||||
|
|
@ -384,6 +382,7 @@ A mini-footer with left and right sections.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual enhancements to the footer. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **grid** component is a simplified method for laying out content for multiple screen sizes. It reduces the usual coding burden required to correctly display blocks of content in a variety of display conditions.
|
||||
|
||||
The MDL grid is defined and enclosed by a container element. A grid has 12 columns in the desktop screen size, 8 in the tablet size, and 4 in the phone size, each size having predefined margins and gutters. Cells are laid out sequentially in a row, in the order they are defined, with some exceptions:
|
||||
|
|
@ -10,9 +11,6 @@ You can set a maximum grid width, after which the grid stays centered with paddi
|
|||
|
||||
Grids are a fairly new and non-standardized feature in most user interfaces, and provide users with a way to view content in an organized manner that might otherwise be difficult to understand or retain. Their design and use is an important factor in the overall user experience.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **grid** component:
|
||||
|
||||
1. Code a `<div>` element; this is the "outer" container, intended to hold all of the grid's cells. Style the div as desired (colors, font size, etc.).
|
||||
|
|
@ -95,6 +93,7 @@ A grid with four cells of column size 2 that will display as column size 4 on a
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual enhancements and behavioral effects to the grid. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **icon-toggle** component is an enhanced version of the standard HTML `<input type="checkbox">` element. An icon-toggle consists of a user defined icon that indicates, by visual highlighting, a binary condition that will be set or unset when the user clicks or touches it. Like checkboxes, icon-toggles may appear individually or in groups, and can be selected and deselected individually.
|
||||
|
||||
Icon toggles, particularly as a replacement for certain checkboxes, can be a valuable feature in user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the icon-toggle component's [Material Design specifications page](http://www.google.com/design/spec/components/buttons.html#buttons-other-buttons) for details.
|
||||
|
||||
The icon-toggle component can have a more customized visual look than a standard checkbox, and may be initially or programmatically *disabled*.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **icon-toggle** component:
|
||||
|
||||
1. Code a `<label>` element and give it a `for` attribute whose value is the unique id of the icon-toggle it will contain.
|
||||
|
|
@ -51,6 +49,7 @@ An icon-toggle with a ripple click effect.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the icon-toggle. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **layout** component is a comprehensive approach to page layout that uses MDL development tenets, allows for efficient use of MDL components, and automatically adapts to different browsers, screen sizes, and devices.
|
||||
|
||||
Appropriate and accessible layout is a critical feature of all user interfaces, regardless of a site's content or function. Page design and presentation is therefore an important factor in the overall user experience. See the layout component's [Material Design specifications page](http://www.google.com/design/spec/layout/principles.html) for details.
|
||||
|
||||
Use of MDL layout principles simplifies the creation of scalable pages by providing reusable components and encourages consistency across environments by establishing recognizable visual elements, adhering to logical structural grids, and maintaining appropriate spacing across multiple platforms and screen sizes. MDL layout is extremely powerful and dynamic, allowing for great consistency in outward appearance and behavior while maintaining development flexibility and ease of use.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include a basic MDL **layout** component:
|
||||
|
||||
1. Code a `<div>` element. This is the "outer" div that holds the entire layout. Add MDL classes as indicated, separated by spaces, to the div using the `class` attribute.
|
||||
|
|
@ -188,6 +186,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
The layout component is ready for use.
|
||||
|
||||
#### Examples
|
||||
|
||||
A layout with a fixed header for larger screens and a collapsible drawer for smaller screens.
|
||||
```html
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
|
|
@ -298,6 +297,7 @@ A layout with a fixed drawer but no header.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the layout. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@
|
|||
|
||||
&.is-visible {
|
||||
transform: translateX(0);
|
||||
& ~ .mdl-layout__content {
|
||||
& ~ .mdl-layout__content.mdl-layout__content {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
}
|
||||
|
||||
& > .mdl-layout__title,
|
||||
& > .mdl-layout-tile {
|
||||
& > .mdl-layout-title {
|
||||
line-height: $layout-desktop-header-height;
|
||||
padding-left: $layout-header-desktop-indent;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
## 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.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **menu** component:
|
||||
|
||||
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.
|
||||
|
|
@ -45,6 +43,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
The menu component is ready for use.
|
||||
|
||||
#### Examples
|
||||
|
||||
A menu with three options.
|
||||
```html
|
||||
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
|
||||
|
|
@ -80,6 +79,7 @@ A menu with three options, the second of which is disabled by default.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the menu. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **progress** component is a visual indicator of background activity in a web page or application. A progress indicator consists of a (typically) horizontal bar containing some animation that conveys a sense of motion. While some progress devices indicate an approximate or specific percentage of completion, the MDL progress component simply communicates the fact that an activity is ongoing and is not yet complete.
|
||||
|
||||
Progress indicators are an established but non-standardized feature in user interfaces, and provide users with a visual clue to an application's status. Their design and use is therefore an important factor in the overall user experience. See the progress component's [Material Design specifications page](http://www.google.com/design/spec/components/progress-activity.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.
|
||||
|
||||
### To include an MDL **progress** component:
|
||||
|
||||
1. Code a `<div>` element. Include any desired attributes and values, such as an id or width — typically done using external CSS rather than the inline `style` attribute as shown here.
|
||||
|
|
@ -20,6 +18,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
The progress component is ready for use.
|
||||
|
||||
#### Examples
|
||||
|
||||
A static (non-animated) progress indicator.
|
||||
```html
|
||||
<div id="progstatic" style="width:250px" class="mdl-js-progress"></div>
|
||||
|
|
@ -32,6 +31,7 @@ An active (animated) progress indicator.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the progress indicator. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **radio** component is an enhanced version of the standard HTML `<input type="radio">`, or "radio button" element. A radio button consists of a small circle and, typically, text that clearly communicates a condition that will be set when the user clicks or touches it. Radio buttons always appear in groups of two or more and, while they can be individually selected, can only be deselected by selecting a different radio button in the same group (which deselects all other radio buttons in the group). The MDL radio component allows you to add display and click effects.
|
||||
|
||||
Radio buttons are a common feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the radio component's [Material Design specifications page](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button) for details.
|
||||
|
||||
The enhanced radio component has a more vivid visual look than a standard radio button, and may be initially or programmatically *disabled*.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **radio** component:
|
||||
|
||||
1. Code a `<label>` element and give it a `for` attribute whose value is the unique id of the radio button it will contain. The `for` attribute is optional when the `<input>` element is contained inside the `<label>` element, but is recommended for clarity.
|
||||
|
|
@ -45,6 +43,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
The radio components are ready for use.
|
||||
|
||||
#### Example
|
||||
|
||||
A group of radio buttons to control a camera's flash setting.
|
||||
```html
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash1">
|
||||
|
|
@ -62,6 +61,7 @@ A group of radio buttons to control a camera's flash setting.
|
|||
</label>
|
||||
```
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the radio button. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -225,6 +225,11 @@
|
|||
this.btnElement_ = this.element_.querySelector('.' +
|
||||
this.CssClasses_.RADIO_BTN);
|
||||
|
||||
this.boundChangeHandler_ = this.onChange_.bind(this);
|
||||
this.boundFocusHandler_ = this.onChange_.bind(this);
|
||||
this.boundBlurHandler_ = this.onBlur_.bind(this);
|
||||
this.boundMouseUpHandler_ = this.onMouseup_.bind(this);
|
||||
|
||||
var outerCircle = document.createElement('span');
|
||||
outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE);
|
||||
|
||||
|
|
@ -244,7 +249,7 @@
|
|||
this.CssClasses_.RIPPLE_CONTAINER);
|
||||
rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
|
||||
rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
|
||||
rippleContainer.addEventListener('mouseup', this.onMouseup_.bind(this));
|
||||
rippleContainer.addEventListener('mouseup', this.boundMouseUpHandler_);
|
||||
|
||||
var ripple = document.createElement('span');
|
||||
ripple.classList.add(this.CssClasses_.RIPPLE);
|
||||
|
|
@ -253,16 +258,44 @@
|
|||
this.element_.appendChild(rippleContainer);
|
||||
}
|
||||
|
||||
this.btnElement_.addEventListener('change', this.onChange_.bind(this));
|
||||
this.btnElement_.addEventListener('focus', this.onFocus_.bind(this));
|
||||
this.btnElement_.addEventListener('blur', this.onBlur_.bind(this));
|
||||
this.element_.addEventListener('mouseup', this.onMouseup_.bind(this));
|
||||
this.btnElement_.addEventListener('change', this.boundChangeHandler_);
|
||||
this.btnElement_.addEventListener('focus', this.boundFocusHandler_);
|
||||
this.btnElement_.addEventListener('blur', this.boundBlurHandler_);
|
||||
this.element_.addEventListener('mouseup', this.boundMouseUpHandler_);
|
||||
|
||||
this.updateClasses_();
|
||||
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Downgrade the element.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MaterialRadio.prototype.mdlDowngrade_ = function() {
|
||||
var rippleContainer = this.element_.querySelector('.' +
|
||||
this.CssClasses_.RIPPLE_CONTAINER);
|
||||
this.btnElement_.removeEventListener('change', this.boundChangeHandler_);
|
||||
this.btnElement_.removeEventListener('focus', this.boundFocusHandler_);
|
||||
this.btnElement_.removeEventListener('blur', this.boundBlurHandler_);
|
||||
this.element_.removeEventListener('mouseup', this.boundMouseUpHandler_);
|
||||
if (rippleContainer) {
|
||||
rippleContainer.removeEventListener('mouseup', this.boundMouseUpHandler_);
|
||||
this.element_.removeChild(rippleContainer);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Public alias for the downgrade method.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
MaterialRadio.prototype.mdlDowngrade = MaterialRadio.prototype.mdlDowngrade_;
|
||||
|
||||
MaterialRadio.prototype['mdlDowngrade'] =
|
||||
MaterialRadio.prototype.mdlDowngrade;
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **shadow** is not a component in the same sense as an MDL card, menu, or textbox; it is a visual effect that can be assigned to a user interface element. The effect simulates a three-dimensional positioning of the element, as though it is slightly raised above the surface it rests upon — a positive *z-axis* value, in user interface terms. The shadow starts at the edges of the element and gradually fades outward, providing a realistic 3-D effect.
|
||||
|
||||
Shadows are a convenient and intuitive means of distinguishing an element from its surroundings. A shadow can draw the user's eye to an object and emphasize the object's importance, uniqueness, or immediacy.
|
||||
|
||||
Shadows are a well-established feature in user interfaces, and provide users with a visual clue to an object's intended use or value. Their design and use is an important factor in the overall user experience.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **shadow** effect:
|
||||
|
||||
1. Code an element, such as a `<div>`, that is to receive the shadow effect; size and style it as desired, and add any required content.
|
||||
|
|
@ -40,6 +38,7 @@ A div with a user-specified class and a medium-large shadow.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual shadows to the element. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
# Slider
|
||||
|
||||
## Introduction
|
||||
The Material Design Lite (MDL) **slider** component is an enhanced version of the new HTML5 `<input type="range">` element. A slider consists of a horizontal line upon which sits a small, movable disc (the *thumb*) and, typically, text that clearly communicates a value that will be set when the user moves it.
|
||||
|
||||
Sliders are a fairly new feature in user interfaces, and allow users to choose a value from a predetermined range by moving the thumb through the range (lower values to the left, higher values to the right). Their design and use is an important factor in the overall user experience. See the slider component's [Material Design specifications page](http://www.google.com/design/spec/components/sliders.html) for details.
|
||||
The Material Design Lite (MDL) **slider** component is an enhanced version of the new HTML5 `<input type="range">` element. A slider consists of a horizontal line upon which sits a small, movable disc (the *thumb*) and, typically, text that clearly communicates a value that will be set when the user moves it.
|
||||
|
||||
Sliders are a fairly new feature in user interfaces, and allow users to choose a value from a predetermined range by moving the thumb through the range (lower values to the left, higher values to the right). Their design and use is an important factor in the overall user experience. See the slider component's [Material Design specifications page](http://www.google.com/design/spec/components/sliders.html) for details.
|
||||
|
||||
The enhanced slider component may be initially or programmatically *disabled*.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **slider** component:
|
||||
|
||||
1. Code a `<p>` paragraph element and style it as desired. Include a CSS `width` property (directly or via a CSS class), which determines the slider's size.
|
||||
|
|
@ -34,6 +30,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
The slider component is ready for use.
|
||||
|
||||
#### Example
|
||||
|
||||
A slider that controls volume.
|
||||
```html
|
||||
<p style="width:300px">
|
||||
|
|
@ -42,6 +39,7 @@ A slider that controls volume.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the slider. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
@ -53,11 +51,10 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|
|||
>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
|
||||
to modify the value programmatically; instead, use the MDL `change()` method. For example, assuming
|
||||
to modify the value programmatically; instead, use the MDL `change()` method. For example, assuming
|
||||
that *slider1* is a slider object and *newvalue* is a variable containing the desired value, do not
|
||||
use `slider1.value = newvalue`; instead, use `slider1.MaterialSlider.change(newvalue)`.
|
||||
|
||||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **spinner** component is an enhanced replacement for the classic "wait cursor" (which varies significantly among hardware and software versions) and indicates that there is an ongoing process, the results of which are not yet available. A spinner consists of an open circle that changes colors as it animates in a clockwise direction, and clearly communicates that a process has been started but not completed.
|
||||
|
||||
A spinner performs no action itself, either by its display nor when the user clicks or touches it, and does not indicate a process's specific progress or degree of completion. The MDL spinner component provides various types of spinners, and allows you to add display effects.
|
||||
|
||||
Spinners are a fairly new feature of most user interfaces, and provide users with a consistent visual cue about ongoing activity, regardless of hardware device, operating system, or browser environment. Their design and use is an important factor in the overall user experience.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **spinner** component:
|
||||
|
||||
1. Code an element, such as a `<div>`, `<p>`, or `<span>`, to contain the spinner; the element should have no content of its own.
|
||||
|
|
@ -36,6 +34,7 @@ A single-color spinner in a paragraph.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual enhancements to the spinner. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **switch** component is an enhanced version of the standard HTML `<input type="checkbox">` element. A switch consists of a short horizontal "track" with a prominent circular state indicator and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Like checkboxes, switches may appear individually or in groups, and can be selected and deselected individually. However, switches provide a more intuitive visual representation of their state: left/gray for *off*, right/colored for *on*. The MDL switch component allows you to add both display and click effects.
|
||||
|
||||
Switches, particularly as a replacement for certain checkboxes, can be a valuable feature in user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the switch component's [Material Design specifications page](http://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch) for details.
|
||||
|
||||
The enhanced switch component has a more vivid visual look than a standard checkbox, and may be initially or programmatically *disabled*.
|
||||
|
||||
## 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.
|
||||
|
||||
### To include an MDL **switch** component:
|
||||
|
||||
1. Code a `<label>` element and give it a `for` attribute whose value is the unique id of the switch it will contain.
|
||||
|
|
@ -51,6 +49,7 @@ A switch with a ripple click effect.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the switch. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **tab** component is a user interface element that allows different content blocks to share the same screen space in a mutually exclusive manner. Tabs are always presented in sets of two or more, and they make it easy to explore and switch among different views or functional aspects of an app, or to browse categorized data sets individually. Tabs serve as "headings" for their respective content; the *active* tab — the one whose content is currently displayed — is always visually distinguished from the others so the user knows which heading the current content belongs to.
|
||||
|
||||
Tabs are an established but non-standardized feature in user interfaces, and allow users to view different, but often related, blocks of content (often called *panels*). Tabs save screen real estate and provide intuitive and logical access to data while reducing navigation and associated user confusion. Their design and use is an important factor in the overall user experience. See the tab component's [Material Design specifications page](http://www.google.com/design/spec/components/tabs.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.
|
||||
|
||||
### To include a set of MDL **tab** components:
|
||||
|
||||
1. Code a `<div>` element; this is the "outer" div, intended to contain all of the tabs and their content.
|
||||
|
|
@ -91,6 +89,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
The tab components are ready for use.
|
||||
|
||||
#### Example
|
||||
|
||||
Three tabs, with ripple effect on tab links.
|
||||
|
||||
```html
|
||||
|
|
@ -137,6 +136,7 @@ Three tabs, with ripple effect on tab links.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the tabs. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **text field** component is an enhanced version of the standard HTML `<input type="text">` and `<input type="textarea">` elements. A text field consists of a horizontal line indicating where keyboard input can occur and, typically, text that clearly communicates the intended contents of the text field. The MDL text field component provides various types of text fields, and allows you to add both display and click effects.
|
||||
|
||||
Text fields are a common feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the text field component's [Material Design specifications page](http://www.google.com/design/spec/components/text-fields.html) for details.
|
||||
|
||||
The enhanced text field component has a more vivid visual look than a standard text field, and may be initially or programmatically *disabled*.
|
||||
|
||||
## 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.
|
||||
|
||||
There are three main types of text fields in the text field component, each with its own basic coding requirements. The types are *single-line*, *multi-line*, and *expandable*.
|
||||
|
||||
### To include a *single-line* MDL **text field** component:
|
||||
|
|
@ -238,6 +235,7 @@ Expandable text field with a floating label.
|
|||
</div>
|
||||
```
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual and behavioral enhancements to the text field. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **tooltip** component is an enhanced version of the standard HTML tooltip as produced by the `title` attribute. A tooltip consists of text and/or an image that clearly communicates additional information about an element when the user hovers over or, in a touch-based UI, touches the element. The MDL tooltip component is pre-styled (colors, fonts, and other settings are contained in *material.min.css*) to provide a vivid, attractive visual element that displays related but typically non-essential content, e.g., a definition, clarification, or brief instruction.
|
||||
|
||||
Tooltips are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is an important factor in the overall user experience. See the tooltip component's [Material Design specifications page](http://www.google.com/design/spec/components/tooltips.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.
|
||||
|
||||
### To include an MDL **tooltip** component:
|
||||
|
||||
1. Code an element, such as a `<div>`, `<p>`, or `<span>`, and style it as desired; this will be the tooltip's target. Include an `id` attribute and unique value to link the container to its tooltip.
|
||||
|
|
@ -59,6 +57,7 @@ A target with a tooltip containing both an image and text.
|
|||
```
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes apply various predefined visual enhancements to the tooltip. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
## Introduction
|
||||
|
||||
The Material Design Lite (MDL) **typography** component is a comprehensive approach to standardizing the use of typefaces in applications and page displays. MDL typography elements are intended to replace the myriad fonts used by developers (which vary significantly in appearance) and provide a robust, uniform library of text styles from which developers can choose.
|
||||
|
||||
The "Roboto" typeface is the standard for MDL display; it can easily be integrated into a web page using the CSS3 `@font-face` rule. However, Roboto is most simply accessed and included using a single standard HTML `<link>` element, which can be obtained at [this Google fonts page](http://www.google.com/fonts#UsePlace:use/Collection:Roboto).
|
||||
|
|
@ -6,7 +7,9 @@ The "Roboto" typeface is the standard for MDL display; it can easily be integrat
|
|||
Because of the many possible variations in font display characteristics in HTML and CSS, MDL typography aims to provide simple and intuitive styles that use the Roboto font and produce visually attractive and internally consistent text results. See the typography component's [Material Design specifications page](http://www.google.com/design/spec/style/typography.html) for details.
|
||||
|
||||
## Basic use
|
||||
MDL typography does not require the inclusion of the minified CSS and JavaScript files that drive the other MDL components. Instead, just include a link to the Google stylesheet that accesses the font and its desired variations.
|
||||
|
||||
Include a link to the Google stylesheet that accesses the font and its desired variations.
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link
|
||||
|
|
@ -67,6 +70,7 @@ A "body-1" paragraph, also uppercased.
|
|||
>Also note that MDL typography provides some automatic adjustments based on its display environment. For example, the `body-1` style renders at 14px on a mobile device, but 13px on a desktop. You need not do anything to activate these self-modifiers; they are built into the MDL styles.
|
||||
|
||||
## Configuration options
|
||||
|
||||
The MDL CSS classes specify the style to use. The table below lists the available classes and their effects.
|
||||
|
||||
| MDL class | Effect | Remarks |
|
||||
|
|
|
|||
|
|
@ -131,4 +131,12 @@ describe('MaterialRadio', function () {
|
|||
|
||||
});
|
||||
|
||||
it('should downgrade successfully', function() {
|
||||
var radio = createRadio();
|
||||
componentHandler.upgradeElement(radio);
|
||||
expect(radio.dataset.upgraded).to.equal(',MaterialRadio');
|
||||
componentHandler.downgradeElements(radio);
|
||||
expect(radio.dataset.upgraded).to.equal('');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue