Major changes to component documentation:
- Reorganized components in categories - Updated all icons (per category, now) - Fixed menu and tooltip demosmaster
Sérgio Gomes
parent
8b4fe8f2bd
commit
41cd1bbb49
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -3,68 +3,85 @@ layout: components
|
|||
title: Components
|
||||
bodyclass: components
|
||||
include_prefix: ../
|
||||
components:
|
||||
- name: badge
|
||||
title: badge
|
||||
description: a badge thingy
|
||||
- name: button
|
||||
title: Button
|
||||
description: Variations on Material Design buttons (flat, raised, plain, colored, with ripple)
|
||||
- name: card
|
||||
title: Card
|
||||
description: a card thingy
|
||||
- name: checkbox
|
||||
title: Checkbox
|
||||
description: a checkbox thingy
|
||||
- name: data-table
|
||||
title: Data Table
|
||||
description: a data table thingy
|
||||
- name: footer
|
||||
title: Footer
|
||||
description: a footer thingy
|
||||
- name: grid
|
||||
title: Grid
|
||||
description: a grid thingy
|
||||
- name: icon-toggle
|
||||
title: Icon Toggle
|
||||
description: an icon toggle thingy
|
||||
categories:
|
||||
- name: badges
|
||||
title: Badges
|
||||
description: Small status descriptors for UI elements.
|
||||
components:
|
||||
- name: badge
|
||||
class: mdl-badge
|
||||
- name: buttons
|
||||
title: Buttons
|
||||
description: Variations on Material Design buttons.
|
||||
components:
|
||||
- name: button
|
||||
class: mdl-button
|
||||
- name: cards
|
||||
title: Cards
|
||||
description: Self-contained pieces of paper with data.
|
||||
components:
|
||||
- name: card
|
||||
class: mdl-card
|
||||
- name: layout
|
||||
title: Layout
|
||||
description: a layout thingy
|
||||
- name: list
|
||||
title: List
|
||||
description: a list thingy
|
||||
- name: menu
|
||||
title: Menu
|
||||
description: a menu thingy
|
||||
- name: progress
|
||||
title: Progress Bar
|
||||
description: a progress bar thingy
|
||||
- name: radio
|
||||
title: Radio Button
|
||||
description: a radio button thingy
|
||||
- name: shadow
|
||||
title: Shadow
|
||||
description: a shadow thingy
|
||||
- name: slider
|
||||
title: Slider
|
||||
description: a slider thingy
|
||||
- name: spinner
|
||||
title: Spinner
|
||||
description: a spinner thingy
|
||||
- name: switch
|
||||
title: Switch
|
||||
description: a switch thingy
|
||||
- name: tabs
|
||||
title: Content Tabs
|
||||
description: a content tab thingy
|
||||
- name: textfield
|
||||
title: Text Field
|
||||
description: a text field thingy
|
||||
- name: tooltip
|
||||
title: Tooltip
|
||||
description: a tooltip thingy
|
||||
- name: typography
|
||||
title: Typography
|
||||
description: a tooltip thingy
|
||||
description: Building blocks for constructing a page layout.
|
||||
components:
|
||||
- name: footer
|
||||
class: mdl-mega-footer / mdl-mini-footer
|
||||
- name: grid
|
||||
class: mdl-grid
|
||||
- name: layout
|
||||
class: mdl-layout
|
||||
- name: tabs
|
||||
class: mdl-tabs
|
||||
- name: loading
|
||||
title: Loading
|
||||
description: Indicate loading and progress states.
|
||||
components:
|
||||
- name: progress
|
||||
class: mdl-progress
|
||||
- name: spinner
|
||||
class: mdl-spinner
|
||||
- name: menus
|
||||
title: Menus
|
||||
description: Lists of clickable actions.
|
||||
components:
|
||||
- name: menu
|
||||
class: mdl-menu
|
||||
- name: sliders
|
||||
title: Sliders
|
||||
description: Selecting a value out of a range.
|
||||
components:
|
||||
- name: slider
|
||||
class: mdl-slider
|
||||
- name: toggles
|
||||
title: Toggles
|
||||
description: Choose between states.
|
||||
components:
|
||||
- name: checkbox
|
||||
class: mdl-checkbox
|
||||
- name: icon-toggle
|
||||
class: mdl-icon-toggle
|
||||
- name: radio
|
||||
class: mdl-radio
|
||||
- name: switch
|
||||
class: mdl-switch
|
||||
- name: tables
|
||||
title: Tables
|
||||
description: Organize data.
|
||||
components:
|
||||
- name: data-table
|
||||
class: mdl-data-table
|
||||
- name: textfields
|
||||
title: Text Fields
|
||||
description: Textual input components.
|
||||
components:
|
||||
- name: textfield
|
||||
class: mdl-textfield
|
||||
- name: tooltips
|
||||
title: Tooltips
|
||||
description: Useful information on hover.
|
||||
components:
|
||||
- name: tooltip
|
||||
class: mdl-tooltip
|
||||
---
|
||||
|
|
|
|||
|
|
@ -6,39 +6,49 @@
|
|||
<link rel="stylesheet" href="/components/demos.css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" rel="stylesheet">
|
||||
|
||||
<!--
|
||||
'toggles': ['checkbox', 'icon-toggle', 'radio', 'switch'],
|
||||
'tables': ['data-table'],
|
||||
'textfields': ['text-field'],
|
||||
'tooltips': ['tooltip']
|
||||
-->
|
||||
|
||||
<div class="mdl-components mdl-js-components">
|
||||
<aside class="mdl-components__nav">
|
||||
{% for component in page.components %}
|
||||
<a href="#{{ component.name }}-section" class="mdl-components__link mdl-component {{ component.name }} {% if loop.first %}is-active{%- endif %}">
|
||||
<div class="mdl-components__link-image"
|
||||
style="background-image: url('/assets/comp_{{ component.name }}.png')">
|
||||
</div>
|
||||
<span class="mdl-components__link-text">{{ component.title }}</span>
|
||||
</a>
|
||||
{% for category in page.categories %}
|
||||
<a href="#{{ category.name }}-section" class="mdl-components__link mdl-component {{ category.name }} {% if loop.first %}is-active{%- endif %}">
|
||||
<div class="mdl-components__link-image"
|
||||
style="background-image: url('/assets/comp_{{ category.name }}.png')">
|
||||
</div>
|
||||
<span class="mdl-components__link-text">{{ category.title }}</span>
|
||||
</a>
|
||||
{%- endfor %}
|
||||
</aside>
|
||||
<main class="mdl-components__pages">
|
||||
{% for component in page.components -%}
|
||||
{% set demo_css = "../../src/" + component.name + "/demo.css" %}
|
||||
<style>
|
||||
{% include demo_css ignore missing %}
|
||||
</style>
|
||||
{% set demo_js = "../../src/" + component.name + "/demo.js" %}
|
||||
<script>
|
||||
{% include demo_js ignore missing %}
|
||||
</script>
|
||||
<section id="{{ component.name }}-section" class="mdl-components__page mdl-grid mdl-cell mdl-cell--12-col {% if loop.first %}is-active{%- endif %}">
|
||||
<div class="mdl-cell mdl-cell--12-col">
|
||||
<h1>{{ component.title }}</h1>
|
||||
<p>{{ component.description }}</p>
|
||||
<br><br>
|
||||
{% set demo = "../../src/" + component.name + "/demo.html" %}
|
||||
{% include demo ignore missing %}
|
||||
{% set doc = "../../dist/components/" + component.name + "/index.html" %}
|
||||
{% include doc ignore missing %}
|
||||
</div>
|
||||
</section>
|
||||
{%- endfor %}
|
||||
{% for category in page.categories -%}
|
||||
<section id="{{ category.name }}-section" class="mdl-components__page mdl-grid mdl-cell mdl-cell--12-col {% if loop.first %}is-active{%- endif %}">
|
||||
<div class="mdl-cell mdl-cell--12-col">
|
||||
<div class="mdl-typography--display-3">{{ category.title }}</div>
|
||||
<p>{{ category.description }}</p>
|
||||
<br><br>
|
||||
{% for component in category.components %}
|
||||
{% set demo_css = "../../src/" + component.name + "/demo.css" %}
|
||||
<style>
|
||||
{% include demo_css ignore missing %}
|
||||
</style>
|
||||
{% set demo_js = "../../src/" + component.name + "/demo.js" %}
|
||||
<script>
|
||||
{% include demo_js ignore missing %}
|
||||
</script>
|
||||
<h1 class="mdl-components__classname">{{ component.class }}</h1>
|
||||
{% set demo = "../../src/" + component.name + "/demo.html" %}
|
||||
{% include demo ignore missing %}
|
||||
{% set doc = "../../dist/components/" + component.name + "/index.html" %}
|
||||
{% include doc ignore missing %}
|
||||
{%- endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{%- endfor %}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
#Badge
|
||||
|
||||
##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:
|
||||
|
||||
* A "New messages" notification might be followed by a badge containing the number of unread messages.
|
||||
* A "You have unpurchased items in your shopping cart" reminder might include a badge showing the number of items in the cart.
|
||||
* A "New messages" notification might be followed by a badge containing the number of unread messages.
|
||||
* A "You have unpurchased items in your shopping cart" reminder might include a badge showing the number of items in the cart.
|
||||
* A "Join the discussion!" button might have an accompanying badge indicating the number of users currently participating in the discussion.
|
||||
|
||||
A badge is almost always positioned near a link so that the user has a convenient way to access the additional information indicated by the badge. However, depending on the intent, the badge itself may or may not be part of the link.
|
||||
|
||||
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.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
.demo-button {
|
||||
display: inline-block;
|
||||
margin: 20px 20px 20px 0;
|
||||
margin: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
.demo-button .highlight-button {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
#Card
|
||||
|
||||
##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.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
#Checkbox
|
||||
|
||||
##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](http://www.google.com/design/spec/components/switches.html) for details.
|
||||
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](http://www.google.com/design/spec/components/switches.html) for details.
|
||||
|
||||
The enhanced checkbox component has a more vivid visual look than a standard checkbox, and may be initially or programmatically *disabled*.
|
||||
|
||||
|
|
@ -72,4 +70,3 @@ For working examples of the **checkbox** component, see the MDL [checkbox demo p
|
|||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,46 +1,29 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Data Table</title>
|
||||
<div class="demo-preview-block">
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
<link rel="stylesheet" href="../../material.css">
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body class="demo-page demo-page--data-table">
|
||||
|
||||
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="mdl-data-table__cell--non-numeric">Material</th>
|
||||
<th>Quantity</th>
|
||||
<th>Unit price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
|
||||
<td>25</td>
|
||||
<td>$2.90</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
|
||||
<td>50</td>
|
||||
<td>$1.25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
|
||||
<td>10</td>
|
||||
<td>$2.35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script src="../../material.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="mdl-data-table__cell--non-numeric">Material</th>
|
||||
<th>Quantity</th>
|
||||
<th>Unit price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
|
||||
<td>25</td>
|
||||
<td>$2.90</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
|
||||
<td>50</td>
|
||||
<td>$1.25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
|
||||
<td>10</td>
|
||||
<td>$2.35</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,14 +25,10 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* We define h2 under body, so it doesn't bleed into typography styles. */
|
||||
.demo-page > h2 {
|
||||
margin-top: 24px ;
|
||||
margin-bottom: 24px / 2;
|
||||
}
|
||||
|
||||
.demo-preview-block {
|
||||
padding: 20px;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
#Footer
|
||||
|
||||
##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.
|
||||
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.
|
||||
|
|
@ -413,4 +411,3 @@ For working examples of the **footer** component, see the MDL [footer demo page]
|
|||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
#Grid
|
||||
|
||||
##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 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:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
# Layout module
|
||||
|
||||
The layout module allows you to build layouts easily, simply by adding a few CSS classes. Everybody loves CSS classes.
|
||||
|
||||
## Basic Example
|
||||
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
#List
|
||||
|
||||
##Introduction
|
||||
The Material Design Lite (MDL) **list** component is an enhanced version of the standard HTML `<ul>` (unordered list) element. A list consists of a series of related items presented either vertically or horizontally.
|
||||
|
||||
An MDL-enhanced list takes two basic forms: *inline* and *styled-view*. An inline list presents the list items horizontally, which saves screen space and facilitates viewing and selecting; a style-view list presents the list items vertically, with accompanying images that help identify or clarify the items, and horizontal rules that separate the items.
|
||||
|
||||
Lists are a common feature in user interfaces, and allow users to view (and sometimes choose) an item from the series. Their design and use is an important factor in the overall user experience. See the list component's [Material Design specifications page](http://www.google.com/design/spec/components/lists.html) for details.
|
||||
Lists are a common feature in user interfaces, and allow users to view (and sometimes choose) an item from the series. Their design and use is an important factor in the overall user experience. See the list component's [Material Design specifications page](http://www.google.com/design/spec/components/lists.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.
|
||||
|
|
@ -206,4 +204,3 @@ For working examples of the **list** component, see the MDL [list demo page](www
|
|||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
#Menu
|
||||
|
||||
##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.
|
||||
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.
|
||||
|
|
@ -50,8 +48,8 @@ The menu component is ready for use.
|
|||
A menu with three options.
|
||||
```html
|
||||
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ul class="mdl-menu mdl-js-menu" for="menu-speed">
|
||||
<li class="mdl-menu__item">Fast</li>
|
||||
<li class="mdl-menu__item">Medium</li>
|
||||
|
|
@ -61,8 +59,8 @@ A menu with three options.
|
|||
A menu with three options, with ripple effect on button and option links.
|
||||
```html
|
||||
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="menu-speed">
|
||||
<li class="mdl-menu__item">Fast</li>
|
||||
<li class="mdl-menu__item">Medium</li>
|
||||
|
|
@ -72,8 +70,8 @@ A menu with three options, with ripple effect on button and option links.
|
|||
A menu with three options, the second of which is disabled by default.
|
||||
```html
|
||||
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ul class="mdl-menu mdl-js-menu" for="menu-speed">
|
||||
<li class="mdl-menu__item">Fast</li>
|
||||
<li class="mdl-menu__item" disabled>Medium</li>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.demo-page--menu .demo-preview-block {
|
||||
.demo-page--menu {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
#Progress
|
||||
|
||||
##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.
|
||||
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.
|
||||
|
|
@ -46,4 +44,3 @@ For working examples of the **progress** component, see the MDL [progress demo p
|
|||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
#Radio
|
||||
|
||||
##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](http://www.google.com/design/spec/components/switches.html) for details.
|
||||
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](http://www.google.com/design/spec/components/switches.html) for details.
|
||||
|
||||
The enhanced radio component has a more vivid visual look than a standard radio button, and may be initially or programmatically *disabled*.
|
||||
|
||||
|
|
@ -41,7 +39,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
5. Repeat steps 1 through 4 for the other radio components in the group. For each one:
|
||||
* on the `label` element, specify a unique `for` attribute value
|
||||
* on the `input` element, specify an `id` attribute value that matches its `label` element's `for` attribute value
|
||||
* on the `input` element, specify the same `name` attribute value for all radio components in the group
|
||||
* on the `input` element, specify the same `name` attribute value for all radio components in the group
|
||||
* optionally, on the `input` element, specify a unique `value` attribute value
|
||||
|
||||
The radio components are ready for use.
|
||||
|
|
@ -50,17 +48,17 @@ The radio components are ready for use.
|
|||
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">
|
||||
<input checked class="mdl-radio__button" id="flash1" name="flash" type="radio" value="on">
|
||||
<input checked class="mdl-radio__button" id="flash1" name="flash" type="radio" value="on">
|
||||
<span class="mdl-radio__label">Always on</span>
|
||||
</label>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash2">
|
||||
<input class="mdl-radio__button" id="flash2" name="flash" type="radio" value="off">
|
||||
<input class="mdl-radio__button" id="flash2" name="flash" type="radio" value="off">
|
||||
<span class="mdl-radio__label">Always off</span>
|
||||
</label>
|
||||
</label>
|
||||
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash3">
|
||||
<input class="mdl-radio__button" id="flash3" name="flash" type="radio" value="auto">
|
||||
<input class="mdl-radio__button" id="flash3" name="flash" type="radio" value="auto">
|
||||
<span class="mdl-radio__label">Automatic</span>
|
||||
</label>
|
||||
</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.
|
||||
|
|
@ -82,4 +80,3 @@ For working examples of the **radio** component, see the MDL [radio demo page](w
|
|||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
#Shadow
|
||||
|
||||
##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 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
#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.
|
||||
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.
|
||||
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*.
|
||||
|
||||
|
|
@ -58,4 +56,3 @@ For working examples of the **slider** component, see the MDL [slider demo page]
|
|||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
#Spinner
|
||||
|
||||
##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.
|
||||
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.
|
||||
|
||||
|
|
@ -56,4 +54,3 @@ For working examples of the **spinner** component, see the MDL [spinner demo pag
|
|||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
#Switch
|
||||
|
||||
##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/switches.html) for details.
|
||||
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/switches.html) for details.
|
||||
|
||||
The enhanced switch component has a more vivid visual look than a standard checkbox, and may be initially or programmatically *disabled*.
|
||||
|
||||
|
|
@ -72,4 +70,3 @@ For working examples of the **switch** component, see the MDL [switch demo page]
|
|||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
#Tabs
|
||||
|
||||
##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.
|
||||
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.
|
||||
|
|
@ -154,4 +152,3 @@ For working examples of the **tab** component, see the MDL [tab demo page](www.g
|
|||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
#Text field
|
||||
|
||||
##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.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
#Tooltip
|
||||
|
||||
##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, long-presses 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.
|
||||
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.
|
||||
|
|
@ -14,7 +12,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
|
|||
```html
|
||||
<p id="tt1">HTML</p>
|
||||
```
|
||||
2. Following the target element, code a second element, such as a `<div>`, `<p>`, or `<span>`; this will be the tooltip itself. Include a `for` attribute whose value matches that of the target's `id`.
|
||||
2. Following the target element, code a second element, such as a `<div>`, `<p>`, or `<span>`; this will be the tooltip itself. Include a `for` attribute whose value matches that of the target's `id`.
|
||||
```html
|
||||
<p id="tt1">HTML</p>
|
||||
<span for="tt1">HyperText Markup Language</span>
|
||||
|
|
@ -73,4 +71,3 @@ For working examples of the **tooltip** component, see the MDL [tooltip demo pag
|
|||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||
|
||||
|
|
|
|||
|
|
@ -15,12 +15,6 @@
|
|||
*/
|
||||
|
||||
.demo-page--tooltip {
|
||||
background : #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.demo-page--tooltip .demo-preview-block {
|
||||
background: #eee;
|
||||
padding: 20px;
|
||||
height: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<div class="demo-preview-block demo-page--tooltip">
|
||||
|
||||
<div id="el1" class="icon material-icons">note_add</div>
|
||||
<div class="mdl-tooltip" for="el1">
|
||||
<div id="tt1" class="icon material-icons">note_add</div>
|
||||
<div class="mdl-tooltip" for="tt1">
|
||||
Simple tooltip
|
||||
</div>
|
||||
|
||||
<div id="el2" class="icon material-icons">mood</div>
|
||||
<div class="mdl-tooltip" for="el2">
|
||||
<div id="tt2" class="icon material-icons">mood</div>
|
||||
<div class="mdl-tooltip" for="tt2">
|
||||
This is a
|
||||
<strong>rich tooltip</strong>
|
||||
</div>
|
||||
|
||||
<div id="el3" class="icon material-icons">group</div>
|
||||
<div class="mdl-tooltip" for="el3">
|
||||
<div id="tt3" class="icon material-icons">group</div>
|
||||
<div class="mdl-tooltip" for="tt3">
|
||||
This is an example of a long tooltip that wraps
|
||||
</div>
|
||||
|
||||
<div id="el4" class="icon material-icons">menu</div>
|
||||
<div class="mdl-tooltip mdl-tooltip--large" for="el4">
|
||||
<div id="tt4" class="icon material-icons">menu</div>
|
||||
<div class="mdl-tooltip mdl-tooltip--large" for="tt4">
|
||||
Element with a large tooltip
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
#Typography
|
||||
|
||||
##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 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.
|
||||
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.
|
||||
|
|
@ -105,4 +103,3 @@ For working examples of the **typography** component, see the MDL [typography de
|
|||
## License
|
||||
|
||||
Copyright Google, 2015. Licensed under an Apache-2 license.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue