GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → material-components → Material Components Web Components

material-components / Material Components Web Components

Licence: apache-2.0
Material Design Web Components

Programming Languages

typescript
32286 projects
SCSS
7915 projects
javascript
184084 projects - #8 most used programming language

Material Web

Test Status GitHub issues by-label

IMPORTANT: Material Web is a work in progress and subject to major changes until 1.0 release.

Material Web is Google’s UI toolkit for building beautiful, accessible web applications. Material Web is implemented as a collection of web components.

The Material team is currently working on Material You (Material Design 3) support for Material components.

Developers using this library should expect some big changes as we work to improve our codebase and ease of use and implement the newest Material Design.

A few notable changes you should expect:

  • UX changes as we adopt the new designs (production users will definitely want to pin to an appropriate release, not mainline)

  • A single npm package (@material/web)

  • Simplification of tag name prefixes to md- (CSS custom properties will be --md-)

  • Components as top-level folders which contain all variants

    Example: top-app-bar and top-app-bar-fixed will be placed in the same folder: top-app-bar

  • Components with variant attributes will be split into several variant components:

    Example: mwc-button will be split into md-text-button, md-filled-button, md-tonal-button, md-outlined-button, etc

API demos

Theming Guide

Sandbox demo on Glitch

Contributing Guide

Components

Component Status Issues
<mwc-button> Published on npm Issues
<mwc-bottom-app-bar> TBD Issues
<mwc-card> TBD Issues
<mwc-checkbox> Published on npm Issues
<mwc-chip> TBD Issues
<mwc-circular-progress> Published on npm Issues
<mwc-circular-progress-four-color> Published on npm Issues
<mwc-data-table> TBD Issues
<mwc-dialog> Published on npm Issues
<mwc-drawer> Published on npm Issues
<mwc-fab> Published on npm Issues
<mwc-formfield> Published on npm Issues
<mwc-icon-button-toggle> Published on npm Issues
<mwc-icon-button> Published on npm Issues
<mwc-icon> Published on npm Issues
<mwc-linear-progress> Published on npm Issues
<mwc-list> Published on npm Issues
<mwc-menu> Published on npm Issues
<mwc-radio> Published on npm Issues
<mwc-select> Published on npm Issues
<mwc-slider> Published on npm Issues
<mwc-snackbar> Published on npm Issues
<mwc-switch> Published on npm Issues
<mwc-tab-bar> Published on npm Issues
<mwc-tab> Published on npm Issues
<mwc-textarea> Published on npm Issues
<mwc-textfield> Published on npm Issues
<mwc-tooltip> TBD Issues
<mwc-top-app-bar-fixed> Published on npm Issues
<mwc-top-app-bar> Published on npm Issues

Quick start

1) Install

Install a component from NPM:

npm install @material/mwc-button @webcomponents/webcomponentsjs

2) Write HTML and JavaScript

Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript, just like you would with a built-in element such as <button>:

OSZAR »
">
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Example App</title>

    <!-- Add support for Web Components to older browsers. -->
    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

    <!-- Your application must load the Roboto and Material Icons fonts. -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
  </head>
  <body>
    <!-- Use Web Components in your HTML like regular built-in elements. -->
    <mwc-button id="myButton" label="Click Me!" raised></mwc-button>

    <!-- Material Web uses standard JavaScript modules. -->
    <script type="module">

      // Importing this module registers <mwc-button> as an element that you
      // can use in this page.
      //
      // Note this import is a bare module specifier, so it must be converted
      // to a path using a server such as Web Dev Server.
      import '@material/mwc-button';

      // Standard DOM APIs work with Web Components just like they do for
      // built-in elements.
      const button = document.querySelector('#myButton');
      button.addEventListener('click', () => {
        alert('You clicked!');
      });
    </script>
  </body>
</html>

3) Serve

Serve your HTML with any server or build process that supports bare module specifier resolution (see next section):

npm install --save-dev @web/dev-server
npx web-dev-server --node-resolve

Bare module specifiers

Material Web is published as standard JavaScript modules that use bare module specifiers. Bare module specifiers are not yet supported by browsers, so it is necessary to use a tool that transforms them to a path (for example from @material/mwc-button to ./node_modules/@material/mwc-button/mwc-button.js).

Two great choices for tools that do this are:

Fonts

Most applications should include the following tags in their main HTML file to ensure that text and icons render correctly:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

Material Web defaults to using the Roboto font for text, and the Material Icons font for icons. These fonts are not automatically loaded, so it is the application's responsiblity to ensure that they are loaded.

Note that if you load the Material Icons font in a different way to the recommendation shown above, be sure to include font-display: block in your @font-face CSS rule. This prevents icons from initially displaying their raw ligature text before the font has loaded. The <link> tag recommended above automaticaly handles this setting.

Supporting older browsers

Material Web uses modern browser features that are natively supported in the latest versions of Chrome, Safari, Firefox, and Edge. IE11 and some older versions of other browsers are also supported, but they require additional build steps and polyfills.

Feature
Chrome
Safari
Firefox
Edge
IE11
Web Components Yes Yes Yes Yes Polyfill *
Modules Yes Yes Yes Yes Transform *
ES2015 Yes Yes Yes Yes Transpile *

Web Components

To support Web Components in IE11 and other older browsers, install the Web Components Polyfills:

npm install @webcomponents/webcomponentsjs

And include the webcomponents-loader.js script in your HTML, which detects when polyfills are needed and loads them automatically:

<!-- Add support for Web Components to IE11. -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

Modules

To support IE11 or other older browsers that do not support JavaScript modules, you must transform JavaScript modules to classic JavaScript scripts. Rollup is a popular tool that can consume JavaScript modules and produce a number of other formats, such as AMD. Be sure to use the rollup-plugin-node-resolve plugin to resolve bare module specifiers, as mentioned above.

ES2015

If you support IE11 or other older browsers that do not support the latest version of JavaScript, you must transpile your application to ES5. Babel is a popular tool that does this. You can integrate Babel transpilation into a Rollup configuration using rollup-plugin-babel.

Contributing

Clone and setup the repo:

git clone [email protected]:material-components/material-web.git mwc
cd mwc
npm install
npm run build

View the demos:

npm run dev
http://127.0.0.1:8000/demos/

Run all tests:

npm run test

Run tests for a specific component:

npm run test -- --packages=mwc-button

Run benchmarks for a specific component:

npm run test:bench -- --package list

Advanced developer workflow:

npm install

# (persistent) build source files on change
npm run watch

# another terminal (persistent) - viewing auto-reload demos
npm run dev -- --watch -p <optional port>

# for testing:
# another terminal (persistent) - build tests (must run after normal watch)
npm run watch:tests

# another terminal (persistent) - debug tests
npm run test:debug -- --autoWatch --packages <comma sepaarated package names> # e.g. mwc-switch,mwc-text*
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].
OSZAR »