material-components-web  4.0.0
About: material-components-web (MDC-Web) offers modular and customizable Material Design UI components for the web.
  Fossies Dox: material-components-web-4.0.0.tar.gz  ("unofficial" and yet experimental doxygen-generated source code documentation)  

material-components-web Documentation

Some Fossies usage hints in advance:

  1. To see the Doxygen generated documentation please click on one of the items in the steelblue colored "quick index" bar above or use the side panel at the left which displays a hierarchical tree-like index structure and is adjustable in width.
  2. If you want to search for something by keyword rather than browse for it you can use the client side search facility (using Javascript and DHTML) that provides live searching, i.e. the search results are presented and adapted as you type in the Search input field at the top right.
  3. Doxygen doesn't incorporate all member files but just a definable subset (basically the main project source code files that are written in a supported language). So to search and browse all member files you may visit the Fossies
  4. material-components-web-4.0.0.tar.gz contents page and use the Fossies standard member browsing features (also with source code highlighting and additionally with optional code folding).
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 tends to release breaking changes on a monthly basis, but follows semver so you can control when you incorporate them. We typically follow a 2-week release schedule which includes one major release per month with breaking changes, and intermediate patch releases with bug fixes.

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">Label</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">Label</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 glitch 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