mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-11 12:25:38 +03:00
fix add space between # and headings (closes #1450)
This makes the intended headings actual headings in the generated docs
This commit is contained in:
Victor Häggqvist
Surma
parent
3a1d424268
commit
a64e9b6809
@ -1,6 +1,6 @@
|
||||
# Material Design Lite
|
||||
|
||||
##Introduction
|
||||
## Introduction
|
||||
**Material Design Light (MDL)** is a library of components for web developers based on Google's **Material Design** philosophy: "A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science." Understanding the goals and principles of Material Design is critical to the proper use of the MDL components. If you have not yet read the [Material Design Introduction](http://www.google.com/design/spec/material-design/introduction.html), you should do so before attempting to use the components.
|
||||
|
||||
The MDL components are created with CSS, JavaScript, and HTML. You can use the components to construct web pages and web apps that are attractive, consistent, and functional. Pages developed with MDL will adhere to modern web design principles like browser portability, device independence, and graceful degradation.
|
||||
@ -11,10 +11,10 @@ MDL is free to download and use, and may be used with or without any build libra
|
||||
|
||||
## Getting started
|
||||
|
||||
###Get the components
|
||||
### Get the components
|
||||
To obtain the components, clone or download the [GitHub MDL repository](https://github.com/google/material-design-lite). Copy the entire package (the top-level folder and everything below it) to the project folder where you will write your HTML pages. This ensures that your project can access all of MDL's components and assets, and that you always have the original files for reference in case you break something. :-)
|
||||
|
||||
###Include the master CSS and JavaScript
|
||||
### Include the master CSS and JavaScript
|
||||
In each HTML page in your project, include the minified (compressed) CSS and JavaScript files using standard relative-path references and the Material Icon font. This example assumes that a copy of the MDL package folders resides in your project folder.
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ In each HTML page in your project, include the minified (compressed) CSS and Jav
|
||||
|
||||
That's it! You are now ready to use the MDL components.
|
||||
|
||||
###Use the 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/>
|
||||
@ -36,7 +36,7 @@ In general, follow these basic steps to use an MDL component in your HTML page.
|
||||
>**A note about HTML elements and MDL CSS classes**
|
||||
>Material Design Lite uses CSS *independent classes*, which can apply to any HTML element, to construct components. For some components, you can use almost any element. For other components, some elements give better visual or behavioral performance than others. The examples in each component's README file use elements that perform well as that component. If you must use elements other than those shown in the examples, we encourage you to experiment to find the best combination of HTML elements and MDL CSS classes for your application.
|
||||
|
||||
##What's next?
|
||||
## What's next?
|
||||
Detailed instructions for using the components, including MDL classes and their effects, coding considerations, and configuration options, can be found in each component's `README.md` file. Working examples using various options are in each component's `demo.html` page.
|
||||
|
||||
## License
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
##Introduction
|
||||
## 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,10 +11,10 @@ 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
|
||||
## 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:
|
||||
### To include an MDL **badge** component:
|
||||
|
||||
1. Code an `<a>` (anchor/link) or a `<span>` element. Include any desired attributes and content.
|
||||
```html
|
||||
@ -33,7 +33,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
|
||||
#### Examples
|
||||
A badge inside a link.
|
||||
```html
|
||||
<a href="#" class="mdl-badge" data-badge="7">This link contains a badge.</a>
|
||||
@ -57,7 +57,7 @@ A badge inside a link with no badge background color.
|
||||
This badge has no background color.</a>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,14 +1,14 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -21,7 +21,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The button component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
A button with the "raised" effect.
|
||||
```html
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
|
||||
@ -38,7 +38,7 @@ A button with the "icon" and "colored" effects.
|
||||
```
|
||||
|
||||
|
||||
##Configuration options
|
||||
## 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,14 +1,14 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -70,7 +70,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The card component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
|
||||
A card (no shadow) with a title, image, text, and action.
|
||||
|
||||
@ -112,7 +112,7 @@ Card (level-3 shadow) with an image, caption, and text:
|
||||
</div>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,14 +1,14 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -39,7 +39,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The checkbox component is ready for use.
|
||||
|
||||
####Example
|
||||
#### Example
|
||||
|
||||
A checkbox with a ripple click effect.
|
||||
|
||||
@ -50,7 +50,7 @@ A checkbox with a ripple click effect.
|
||||
</label>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,14 +1,14 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -77,7 +77,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The data-table component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### 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">
|
||||
@ -148,7 +148,7 @@ A data-table without select checkboxes containing mostly text data.
|
||||
</table>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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 |
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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*.
|
||||
```html
|
||||
@ -229,7 +229,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The mega-footer component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
|
||||
A mega-footer component with three sections and two drop-down sections in the middle section.
|
||||
```html
|
||||
@ -280,7 +280,7 @@ A mega-footer component with three sections and two drop-down sections in the mi
|
||||
</footer>
|
||||
```
|
||||
|
||||
###To include an MDL **mini-footer** component:
|
||||
### To include an MDL **mini-footer** component:
|
||||
|
||||
1a. Code a `<footer>` element. Inside the footer, code two `<div>` elements, one for the *left* section and one for the *right* section.
|
||||
```html
|
||||
@ -359,7 +359,7 @@ A mega-footer component with three sections and two drop-down sections in the mi
|
||||
|
||||
The mini-footer component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
|
||||
A mini-footer with left and right sections.
|
||||
|
||||
@ -383,7 +383,7 @@ A mini-footer with left and right sections.
|
||||
</footer>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,4 @@
|
||||
##Introduction
|
||||
## 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,10 +10,10 @@ 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
|
||||
## 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:
|
||||
### 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.).
|
||||
```html
|
||||
@ -52,7 +52,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The grid component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
|
||||
A grid with five cells of column size 1.
|
||||
```html
|
||||
@ -94,7 +94,7 @@ A grid with four cells of column size 2 that will display as column size 4 on a
|
||||
</div>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,14 +1,14 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -39,7 +39,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The icon-toggle component is ready for use.
|
||||
|
||||
####Example
|
||||
#### Example
|
||||
|
||||
An icon-toggle with a ripple click effect.
|
||||
|
||||
@ -50,7 +50,7 @@ An icon-toggle with a ripple click effect.
|
||||
</label>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,14 +1,14 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -187,7 +187,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The layout component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### 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">
|
||||
@ -297,7 +297,7 @@ A layout with a fixed drawer but no header.
|
||||
</div>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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 |
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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` attribute of the unordered list coded in the next step. Inside the button, code a `<span>` element to contain an icon of your choice.
|
||||
```html
|
||||
@ -44,7 +44,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The menu component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
A menu with three options.
|
||||
```html
|
||||
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
|
||||
@ -79,7 +79,7 @@ A menu with three options, the second of which is disabled by default.
|
||||
</ul>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,12 +1,12 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -19,7 +19,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The progress component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
A static (non-animated) progress indicator.
|
||||
```html
|
||||
<div id="progstatic" style="width:250px" class="mdl-js-progress"></div>
|
||||
@ -31,7 +31,7 @@ An active (animated) progress indicator.
|
||||
mdl-progress__indeterminate"></div>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,14 +1,14 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -44,7 +44,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The radio components are ready for use.
|
||||
|
||||
####Example
|
||||
#### 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">
|
||||
@ -61,7 +61,7 @@ A group of radio buttons to control a camera's flash setting.
|
||||
<span class="mdl-radio__label">Automatic</span>
|
||||
</label>
|
||||
```
|
||||
##Configuration options
|
||||
## 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 |
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -25,7 +25,7 @@ Some content
|
||||
|
||||
The shadowed component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
|
||||
A div with a user-specified class and a small shadow.
|
||||
|
||||
@ -39,7 +39,7 @@ A div with a user-specified class and a medium-large shadow.
|
||||
<div class="my-shadow-card mdl-shadow--6dp">Medium-large shadow</div>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,16 +1,16 @@
|
||||
#Slider
|
||||
# Slider
|
||||
|
||||
##Introduction
|
||||
## 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 enhanced slider component may be initially or programmatically *disabled*.
|
||||
|
||||
##Basic 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 an MDL **slider** component:
|
||||
### 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.
|
||||
```html
|
||||
@ -33,7 +33,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The slider component is ready for use.
|
||||
|
||||
####Example
|
||||
#### Example
|
||||
A slider that controls volume.
|
||||
```html
|
||||
<p style="width:300px">
|
||||
@ -41,7 +41,7 @@ A slider that controls volume.
|
||||
</p>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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 |
|
||||
@ -57,7 +57,7 @@ to modify the value programmatically; instead, use the MDL `change()` method. Fo
|
||||
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)`.
|
||||
|
||||
##More information
|
||||
## More information
|
||||
For working examples of the **slider** component, see the MDL [slider demo page](www.github.com/google/material-design-lite/src/slider/demo.html).
|
||||
|
||||
## License
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -21,7 +21,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The spinner component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
|
||||
A default spinner in a div.
|
||||
|
||||
@ -35,7 +35,7 @@ A single-color spinner in a paragraph.
|
||||
<p class="mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active"></p>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,14 +1,14 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -39,7 +39,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The switch component is ready for use.
|
||||
|
||||
####Example
|
||||
#### Example
|
||||
|
||||
A switch with a ripple click effect.
|
||||
|
||||
@ -50,7 +50,7 @@ A switch with a ripple click effect.
|
||||
</label>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,12 +1,12 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -90,7 +90,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The tab components are ready for use.
|
||||
|
||||
####Example
|
||||
#### Example
|
||||
Three tabs, with ripple effect on tab links.
|
||||
|
||||
```html
|
||||
@ -136,7 +136,7 @@ Three tabs, with ripple effect on tab links.
|
||||
</div>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,16 +1,16 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### To include a *single-line* MDL **text field** component:
|
||||
|
||||
1. Code a `<div>` element to hold the text field.
|
||||
```html
|
||||
@ -49,7 +49,7 @@ There are three main types of text fields in the text field component, each with
|
||||
```
|
||||
The single-line text field component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
|
||||
Single-line text field with a standard label.
|
||||
```html
|
||||
@ -76,7 +76,7 @@ Single-line text field with a standard label, pattern matching, and error messag
|
||||
</div>
|
||||
```
|
||||
|
||||
###To include a *multi-line* MDL **text field** component:
|
||||
### To include a *multi-line* MDL **text field** component:
|
||||
|
||||
1. Code a `<div>` element to hold the text field.
|
||||
```html
|
||||
@ -107,7 +107,7 @@ Single-line text field with a standard label, pattern matching, and error messag
|
||||
|
||||
The multi-line text field component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
|
||||
Multi-line text field with one visible input line.
|
||||
```html
|
||||
@ -134,7 +134,7 @@ Multi-line text field with multiple visible input lines and a maximum number of
|
||||
</div>
|
||||
```
|
||||
|
||||
###To include an *expandable* MDL **text field** component:
|
||||
### To include an *expandable* MDL **text field** component:
|
||||
|
||||
1. Code an "outer" `<div>` element to hold the expandable text field.
|
||||
```html
|
||||
@ -207,7 +207,7 @@ Multi-line text field with multiple visible input lines and a maximum number of
|
||||
|
||||
The expandable text field component is ready for use. It will expand when the icon (the empty `<span>`) is clicked or gains focus.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
|
||||
Expandable text field with a standard label.
|
||||
```html
|
||||
@ -237,7 +237,7 @@ Expandable text field with a floating label.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
##Configuration options
|
||||
## 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,12 +1,12 @@
|
||||
##Introduction
|
||||
## 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
|
||||
## 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:
|
||||
### 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.
|
||||
```html
|
||||
@ -25,7 +25,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
||||
|
||||
The tooltip component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
|
||||
A target with a simple text tooltip.
|
||||
```html
|
||||
@ -58,7 +58,7 @@ A target with a tooltip containing both an image and text.
|
||||
<img src="xml-logo-small.png" width="20" height="10"> eXtensible Markup Language</span>
|
||||
```
|
||||
|
||||
##Configuration options
|
||||
## 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,11 +1,11 @@
|
||||
##Introduction
|
||||
## 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).
|
||||
|
||||
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
|
||||
## 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.
|
||||
```html
|
||||
<head>
|
||||
@ -16,7 +16,7 @@ MDL typography does not require the inclusion of the minified CSS and JavaScript
|
||||
</head>
|
||||
```
|
||||
|
||||
###To include an MDL **typography** component:
|
||||
### To include an MDL **typography** component:
|
||||
|
||||
1. Code any element (`<div>`,`<p>`,`<span>`, etc.) that can contain text, including whatever content is appropriate.
|
||||
```html
|
||||
@ -29,7 +29,7 @@ MDL typography does not require the inclusion of the minified CSS and JavaScript
|
||||
|
||||
The typography component is ready for use.
|
||||
|
||||
####Examples
|
||||
#### Examples
|
||||
|
||||
A "headline" paragraph.
|
||||
|
||||
@ -66,7 +66,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
|
||||
## 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 |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# android.com sample
|
||||
|
||||
##Why this sample
|
||||
## Why this sample
|
||||
The goal of this sample is to illustrate implementing a real-world-looking site with **Material Design Lite**.
|
||||
|
||||
We therefore decided to do a cover of the front page of the android.com website, which while not a 1:1 match illustrates MDL usage well.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user