Modular and customizable Material Design UI components for the web
Branch: master
Clone or download
acdvorak docs: Update CHANGELOG.md
(cherry picked from commit fa9fbdf)
Latest commit 4823a7e Feb 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github docs: Update stale triage / release cycle docs (#3703) Oct 5, 2018
demos feat(tab): Implement a base states color mixin for Tab (#4421) Feb 19, 2019
docs docs: Moved RMWC to a complete foundation/adapter integration (#4376) Feb 8, 2019
packages chore: Publish Feb 19, 2019
scripts chore: Refactor sass rewrite script using RegExp (#4354) Feb 5, 2019
test fix(ripple): Use mdc-dom.matches everywhere (#4372) Feb 14, 2019
.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): Standardize screenshot test pages (#3653) Sep 26, 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 style: Remove newlines before CSS annotations (#4126) Nov 30, 2018
.travis.yml feat: Add feature targeting support and apply to mdc-button (#4228) Jan 18, 2019
CHANGELOG.md docs: Update CHANGELOG.md Feb 19, 2019
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 Glitch projects to getting started READMEs (#4196) Jan 11, 2019
ROADMAP.md docs: Update roadmap (#4248) Jan 15, 2019
app.yaml chore: Remove reference to appspot demo server. (#3681) Oct 1, 2018
closure_externs.js fix(drawer): Fix exports and closure tests (#3424) Aug 27, 2018
karma.conf.js chore: Update karma to run Chrome+FF headless and only IE on SL (#4046) Nov 22, 2018
lerna.json chore: Publish Feb 19, 2019
package-lock.json feat(feature-targeting): Elevation, ripple, theme, typography (#4383) Feb 12, 2019
package.json chore: Refactor sass rewrite script using RegExp (#4354) Feb 5, 2019
webpack.config.js feat: update to MIT license (#3376) Aug 21, 2018

README.md

Version Build Status codecov Chat Screenshots

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.

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.

Material Components for the web is the successor to Material Design Lite. In addition to implementing the Material Design guidelines, it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically architected for adaptability to various major web frameworks.

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.

Important links

Quick start

Using via CDN

<!-- Required styles for MDC Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">

<!-- Render textfield component -->
<div class="mdc-text-field">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
  <div class="mdc-line-ripple"></div>
</div>

<!-- Required MDC Web JavaScript library -->
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<!-- Instantiate single textfield component rendered in the document -->
<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>

Please see quick start demo on codepen for full example.

Using NPM

This guide assumes you have webpack configured to compile Sass into CSS. To configure webpack, please see the full getting started guide. You can also see the final code and result in the Material Starter Kit.

Install textfield node module to your project.

npm install @material/textfield

HTML

Sample usage of text field component. Please see MDC Textfield component page for more options.

<div class="mdc-text-field">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
  <div class="mdc-line-ripple"></div>
</div>

CSS

Load styles required for text field component.

@import "@material/textfield/mdc-text-field";

JavaScript

Import MDCTextField module to instantiate text field component.

import {MDCTextField} from '@material/textfield/index';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));

This'll initialize text field component on a single .mdc-text-field element.

Please see quick start demo on stackblitz for full example.

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.

Thank you

Third-party services that we use and are thankful to:

CrossBrowserTesting logo