Coder Social home page Coder Social logo

charlieyqin / material-components-web-components Goto Github PK

View Code? Open in Web Editor NEW

This project forked from material-components/material-web

0.0 1.0 0.0 13.09 MB

Material Design Web Components

Home Page: https://mwc-demos.glitch.me/demos/

License: Apache License 2.0

JavaScript 19.30% CSS 9.95% Shell 3.30% TypeScript 67.22% HTML 0.23%

material-components-web-components's Introduction

Material Web Components Test Status

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

The Material Web Components (MWC) are a collection of Web Components maintained by Google that implement Material Design.

Components

Component Status Issues
<mwc-button> Published on npm Issues
<mwc-bottom-app-bar> Planned Issues
<mwc-card> Planned Issues
<mwc-checkbox> Published on npm Issues
<mwc-chip> Planned Issues
<mwc-circular-progress> Planned Issues
<mwc-data-table> Planned 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> Planned Issues
<mwc-menu> Planned Issues
<mwc-radio> Published on npm Issues
<mwc-select> Planned 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-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>:

<!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 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>

    <!-- The Material Web Components use 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 es-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 -g es-dev-server
es-dev-server --node-resolve

Bare module specifiers

The Material Web Components are 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">

The Material Web Components default 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

The Material Web Components use modern browser features that are natively supported in the latest versions of Chrome, Safari, and Firefox. 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 Polyfill * Polyfill *
Modules Yes Yes Yes Transform * Transform *
ES2015 Yes Yes Yes Yes Transpile *

Web Components

To support Web Components in Edge, 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 Edge and IE11. -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

Modules

To support Edge, 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-components-web-components.git mwc
cd mwc
npm install
npm run build

View the demos:

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

Run all tests:

npm run test

Run tests for a specific component:

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

material-components-web-components's People

Contributors

e111077 avatar dfreedm avatar aomarks avatar dabolus avatar frankiefu avatar straversi avatar github-actions[bot] avatar asyncliz avatar bicknellr avatar 43081j avatar rictic avatar balloob avatar davie-robertson avatar fernandopasik avatar peterblazejewicz avatar tedium-bot avatar vdegenne avatar eskan avatar vlilloh avatar timvdlippe avatar samuelli avatar kevinpschaaf avatar material-admin avatar elf-pavlik avatar stephantabor avatar romulocintra avatar rocat avatar polymer-github-robot avatar kherrick avatar jcrestel avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.