title | layout | path |
---|---|---|
Material Components for the Web |
homepage |
/ |
{% contentfor benefits %}
-
Implement Material Design with pixel-perfect components, maintained by Google engineers and designers
-
Use components designed to work in any context, allowing seamless integration with libraries like React, AngularJS, and server-side rendering
-
Take advantage of components developed with minimal dependencies and tested for flexibility, accessibility, and internationalization
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.
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.
-
{: .step-list-item } ### Install components
Install dependencies for the components you wish to use:
npm install @material/button @material/ripple
-
{: .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 yourwebpack.config.js
by changing{ loader: 'sass-loader' }
to:{ loader: 'sass-loader', options: { sassOptions: { includePaths: ['./node_modules'] } } }
-
{: .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 thefoo-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!
-
{: .step-list-item } ### Add scripts and instantiate components
Next, import the ES Module file for
@material/ripple
into your application, and initialize anMDCRipple
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!
-
{: .step-list-item } ### What's next?
{: .step-list }