Skip to content

AriasBros/material-components-web

 
 

Repository files navigation

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)

Quick start

Note: This guide assumes you have npm installed locally.

Include CSS for a component

Note: This guide assumes you have webpack configured to compile Sass into CSS. See this 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);
}

@material/button has documentation about the required HTML of a button. Update your application's HTML to include this HTML, and add the foo-button class onto the element:

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

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

{
  loader: 'sass-loader',
  options: {
    importer: function(url, prev) {
      if(url.indexOf('@material') === 0) {
        var filePath = url.split('@material')[1];
        var nodeModulePath = `./node_modules/@material/${filePath}`;
        return { file: require('path').resolve(nodeModulePath) };
      }
      return { file: url };
    }
  }
}

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 this getting started guide for pointers on how to configure webpack.

To include the ES2015 files for the Material Design ripple, install the Node 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

Browser Support

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

  • Chrome
  • Safari
  • Firefox
  • IE 11/Edge
  • Opera
  • Mobile Safari
  • Chrome on Android

About

Modular and customizable Material Design UI components for the web

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 63.9%
  • CSS 29.6%
  • HTML 5.7%
  • Shell 0.8%