Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Latest commit

 

History

History
128 lines (95 loc) · 4.23 KB

docsite-index.md

File metadata and controls

128 lines (95 loc) · 4.23 KB
title layout path
Material Components for the Web
homepage
/

{% contentfor benefits %}

  • Accurate & up to date

    Implement Material Design with pixel-perfect components, maintained by Google engineers and designers

  • Seamless integrations

    Use components designed to work in any context, allowing seamless integration with libraries like React, AngularJS, and server-side rendering

  • Industry standards

    Take advantage of components developed with minimal dependencies and tested for flexibility, accessibility, and internationalization

{% endcontentfor %}

Getting Started

Quick Start

To try Material Components for the web with minimal setup, load the CSS and JS from unpkg:

https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css
https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js

Then include MDC markup...

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

...and instantiate JavaScript:

mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));

However, it is highly recommended to install Material Components for the web via npm and consume its ES Modules and Sass directly. This is outlined in the steps below.

Using MDC Web with ES Modules and Sass

Note: This assumes you have Node.js and npm installed locally, and have configured webpack to compile Sass and ES Modules. See the Getting Started Guide for pointers on how to configure webpack.

  1. {: .step-list-item } ### Install components

    Install dependencies for the components you wish to use:

    npm install @material/button @material/ripple
    
  2. {: .step-list-item } ### Import the stylesheet and include styles

    Import the Sass files into your application, and use Sass mixins to customize components:

    @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: {
        sassOptions: {
          includePaths: ['./node_modules']
        }
      }
    }
  3. {: .step-list-item } ### Add components

    Each component (e.g. @material/button) includes documentation about its required HTML structure. 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>

    Combined with the styles above, this will produce a customized Material Design button!

    Button
  4. {: .step-list-item } ### Add scripts and instantiate components

    Next, import the ES Module 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 when it is pressed!

    Button with Ripple
  5. {: .step-list-item } ### What's next?

{: .step-list }