material-components/material-components-web

Name: material-components-web

Owner: Material Components

Description: Modular and customizable Material Design UI components for the web

Created: 2016-12-05 16:04:09.0

Updated: 2018-01-19 00:21:44.0

Pushed: 2018-01-19 04:18:39.0

Homepage: https://material.io/components/

Size: 61716

Language: JavaScript

GitHub Committers

UserMost Recent Commit# Commits

Other Committers

UserEmailMost Recent Commit# Commits

README

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

Install the library

install --save material-components-web

Then simply include the correct files, write some HTML, and call mdc.autoInit() within a closing <script> tag.

CTYPE html>
l>
ead>
<title>Material Components for the web</title>
<link rel="stylesheet"
      href="node_modules/material-components-web/dist/material-components-web.css">
head>
ody class="mdc-typography">
<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
  <input type="text" class="mdc-text-field__input" id="demo-input">
  <label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
</div>
<script src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script>mdc.autoInit()</script>
body>
ml>

That's all there is to it! This is the easiest way to get up and running with Material Components for web. Check out our Getting Started guide for a more in-depth introduction to the library.

Installing individual components

MDC Web is modular by design. Each component lives within its own packages under the @material npm org.

install --save @material/button @material/card @material/textfield @material/typography

All our components can be found in the packages directory. Each component has a README documenting installation and usage.

Including components
JavaScript

If you are using a module loader such as Webpack or SystemJS to load your JS modules, you can simply import every component you need from material-components-web and use it as such.

rt {checkbox as mdcCheckbox} from 'material-components-web';

t {MDCCheckbox, MDCCheckboxFoundation} = mdcCheckbox;
se MDCCheckbox and/or MDCCheckboxFoundation

You can do the same with individual components

rt {MDCCheckbox, MDCCheckboxFoundation} from '@material/checkbox';
se MDCCheckbox and/or MDCCheckboxFoundation

We also provide UMD bundles for both material-components-web as well as all individual components.

t {checkbox: mdcCheckbox} = require('material-components-web/dist/material-components-web');
se mdcCheckbox

t {MDCCheckbox, MDCCheckboxFoundation} = require('@material/checkbox/dist/mdc.checkbox');
se MDCCheckbox, MDCCheckboxFoundation

When no module system is used, every component is added under the global mdc namespace. This occurs regardless of whether or not the entire library or the individual components are used.

Every component also ships with a minified version of its UMD bundle, which can be found at dist/mdc.COMPONENT.min.js.

CSS

All components which include styles provide them at dist/mdc.COMPONENT.css, as well as a complementary minified version at dist/mdc.COMPONENT.min.css. Note that CSS files for a component's dependencies are not included within the component's CSS file, so if you are using individual components you'll have to include each separately.

Each component also comes with a Sass source file that can be included in your application's Sass

sing the whole library
ort "material-components-web/material-components-web";

sing individual components / mixins
ort '@material/checkbox';
ort '@material/typography';
ort '@material/elevation/mixins'; // Mixins for elevation.

NOTE: The components' Sass files expect that the node_modules directory containing the @material scope folder is present on the Sass include path.

Running the demos

Setup the repo:

clone https://github.com/material-components/material-components-web.git && cd material-components-web
i

Run the development server (served out of demos/):

path/to/material-components-web
run dev
 http://localhost:8080
Useful Links
Browser Support

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

This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.