Modular and customizable Material Design UI components for the web
Switch branches/tags
v0.39.3 v0.39.1 v0.39.0 v0.39.0-0 v0.38.2 v0.38.1 v0.38.0 v0.37.1 v0.37.0 v0.36.1 v0.36.0 v0.36.0-0 v0.35.2 v0.35.1 v0.35.0 v0.34.1 v0.34.0 v0.33.0 v0.32.0 v0.31.0 v0.30.0 v0.29.0 v0.28.0 v0.27.0 v0.26.0 v0.25.0 v0.24.0 v0.23.0 v0.22.0 v0.21.1 v0.21.0 v0.20.0 v0.19.0 v0.18.1 v0.18.0 v0.17.0 v0.16.0 v0.15.0 v0.13.0 v0.12.1 v0.12.0 v0.11.1 v0.11.0 v0.10.0 v0.9.1 v0.9.0 v0.8.0 v0.7.0 v0.6.0 v0.5.0 v0.4.0 v0.3.0 v0.2.0 v0.1.1 v0.1.0 @material/typography@0.3.0 @material/typography@0.2.3 @material/typography@0.2.2 @material/typography@0.2.1 @material/typography@0.2.0 @material/typography@0.1.1 @material/toolbar@0.4.11 @material/toolbar@0.4.10 @material/toolbar@0.4.9 @material/toolbar@0.4.8 @material/toolbar@0.4.7 @material/toolbar@0.4.6 @material/toolbar@0.4.5 @material/toolbar@0.4.4 @material/toolbar@0.4.3 @material/toolbar@0.4.2 @material/toolbar@0.4.1 @material/toolbar@0.4.0 @material/toolbar@0.3.3 @material/toolbar@0.3.2 @material/toolbar@0.3.1 @material/toolbar@0.3.0 @material/toolbar@0.2.2 @material/toolbar@0.2.1 @material/toolbar@0.2.0 @material/toolbar@0.1.2 @material/toolbar@0.1.0 @material/theme@0.4.0 @material/theme@0.3.1 @material/theme@0.3.0 @material/theme@0.2.0 @material/theme@0.1.7 @material/theme@0.1.6 @material/theme@0.1.5 @material/theme@0.1.4 @material/theme@0.1.3 @material/theme@0.1.2 @material/theme@0.1.1 @material/textfield@0.5.0 @material/textfield@0.4.1 @material/textfield@0.4.0 @material/textfield@0.3.6 @material/textfield@0.3.5 @material/textfield@0.3.4 @material/textfield@0.3.3
Nothing to show
Clone or download
acdvorak chore(infrastructure): Fix master diff failures on Travis CI (#3598)
### What it does

* Fixes #3555:
    - Shards `master` image diffing into 50 parallel comparisons at a time instead of comparing all 541 images at once
* Reduces startup time by ~1 minute:
    - Prefetches image files in parallel instead of sequentially
    - Removes unnecessary URL prefetching (e.g., HTML files)
* Tries to prevent Travis CI job logs from getting truncated too early (e.g., [job #766.5](https://travis-ci.com/material-components/material-components-web/jobs/142544904)):
    - Adds `sleep 5` to `after_script` in `.travis.yml` (see this [GitHub issue](travis-ci/travis-ci#6421 (comment)))

### How to test

1. Create a PR that modifies `golden.json`
2. The Travis CI job should pass, and its log output should have something like this near the bottom:
    ```
    Comparing 541 screenshots to master
    
    [+ 12,500ms] Comparing screenshots 1–50...
    [+  5,997ms] Comparing screenshots 51–100...
    ```

### Example output

#### Before:

https://travis-ci.com/material-components/material-components-web/jobs/145553262

![image](https://user-images.githubusercontent.com/409245/45851986-6062df00-bcf2-11e8-9790-3f8cdc63655b.png)

#### After:

https://travis-ci.com/material-components/material-components-web/jobs/147092934

![image](https://user-images.githubusercontent.com/409245/45858226-340a8b00-bd11-11e8-8718-e20b270c83f4.png)
Latest commit bbaaf77 Sep 20, 2018
Permalink
Failed to load latest commit information.
.github docs: Update issue template codepen to include icons/roboto (#2595) Apr 20, 2018
demos feat(list): Toggle radio checkbox (#3546) Sep 20, 2018
docs docs: Update release-process docs to include fetching tags (#3427) Aug 28, 2018
packages feat(dialog): Integrate with MDC List; add keyboard action handling (#… Sep 21, 2018
scripts chore: Support cherry-picking from tags not in master (#3532) Sep 11, 2018
test chore(infrastructure): Fix master diff failures on Travis CI (#3598) Sep 21, 2018
.eslintignore chore(infrastructure): Automatically retry screenshots up to 3 times … Jul 14, 2018
.eslintrc.yaml chore: Create script to cherry-pick commits for patch releases (#2881) Jun 7, 2018
.gitattributes chore: removing the rest of framework-examples (#1540) Nov 3, 2017
.gitignore chore(infrastructure): Write compiled output files to test/screenshot… Apr 3, 2018
.htmllintrc chore(infrastructure): Add `npm run lint:html` for screenshot pages (#… Sep 4, 2018
.mdc-docsite.yml docs: Prep component READMEs for documentation site. (#511) May 9, 2017
.stylelintignore chore(infrastructure): Add stylelint config for screenshot tests (#2144) Sep 4, 2018
.stylelintrc.yaml chore(infrastructure): Add stylelint config for screenshot tests (#2144) Sep 4, 2018
.travis.yml chore(infrastructure): Fix master diff failures on Travis CI (#3598) Sep 21, 2018
CHANGELOG.md docs: Update CHANGELOG.md Sep 11, 2018
CONTRIBUTING.md docs: Correct grammar in CONTRIBUTING.md (#3258) Jul 30, 2018
LICENSE feat: update to MIT license (#3376) Aug 21, 2018
README.md docs: add a Need Help section to main Readme to add discord (#3387) Aug 21, 2018
ROADMAP.md chore: Update roadmap to have snackbars, since lots of Google product… Aug 28, 2018
app.yaml chore(demos): Deploy to Google Cloud App Engine. (#108) Dec 19, 2016
closure_externs.js fix(drawer): Fix exports and closure tests (#3424) Aug 27, 2018
karma.conf.js chore(infrastructure): Update unit tests to run in iOS 11 (#3449) Aug 28, 2018
lerna.json chore: Publish Sep 11, 2018
package-lock.json chore(infrastructure): Add `npm run lint:html` for screenshot pages (#… Sep 4, 2018
package.json feat(dialog): Initial prototype (#3413) Sep 13, 2018
webpack.config.js feat: update to MIT license (#3376) Aug 21, 2018

README.md

Version Build Status codecov Chat

Material Components for the web

Material Components for the web (MDC Web) helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.

Material Components for the web is the successor to Material Design Lite, and has 3 high-level goals:

MDC Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.

Demos (updated with every release)

Note: Material Components Web follows semver and is still in version 0.x, which means it is regularly subject to breaking changes. We typically follow a 2-week release schedule which includes one minor release per month with breaking changes, and intermediate patch releases with bug fixes. A list of changes is always available in the CHANGELOG, and a tentative schedule of what we are working on next is available in the ROADMAP.

Quick start

Note: This guide assumes you have Node.js and npm installed locally.

Include CSS for a component

Note: This guide assumes you have webpack configured to compile Sass into CSS. See the getting started guide for pointers on how to configure webpack.

To include the Sass files for the Material Design button, install the Node dependency:

npm install @material/button

Then import the Sass files for @material/button into your application. You can also use Sass mixins to customize the button:

@import "@material/button/mdc-button";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

You also need to configure sass-loader to understand the @material imports used by MDC Web. Update your webpack.config.js by changing { loader: 'sass-loader' } to:

{
  loader: 'sass-loader',
  options: {
    includePaths: ['./node_modules']
  }
}

@material/button has documentation about the required HTML for a button. Update your application's HTML to include the MDC Button markup, and add the foo-button class to the element:

<button class="foo-button mdc-button">
  Button
</button>

This will produce a customized Material Design button!

Button

Include JavaScript for a component

Note: This guide assumes you have webpack configured to compile ES2015 into JavaScript. See the getting started guide for pointers on how to configure webpack.

To include the ES2015 files for the Material Design ripple, install the dependency:

npm install @material/ripple

Then import the ES2015 file for @material/ripple into your application, and initialize an MDCRipple with a DOM element:

import {MDCRipple} from '@material/ripple';
const ripple = new MDCRipple(document.querySelector('.foo-button'));

This will produce a Material Design ripple on the button!

Button with Ripple

Useful links

Need help?

We're constantly trying to improve our components. If Github Issues don't fit your needs, then please visit us on our Discord Channel.

Browser support

We officially support the last two versions of every major browser. Specifically, we test on the following browsers:

  • Chrome on Android, Windows, macOS, and Linux
  • Firefox on Windows, macOS, and Linux
  • Safari on iOS and macOS
  • Edge on Windows
  • IE 11 on Windows

Thank you

Fast, reliable automated screenshot testing is generously provided by:

CrossBrowserTesting logo

Free for open source projects!

Additional continuous integration services courtesy of: