These are WIP. Some known issues: * select, chips, and textfield ripple not working * many tests to be added * some elements tbd, including e.g. top-app-bar and drawer
2.4 KiB
Material Web Components
Material Web Components helps developers execute Material Design using web components.
Built on top of the Material Components Web project and LitElement, the Material Web Components enable a reliable development workflow to build beautiful and functional web projects.
Web Components can be seamlessly incorporated into a wide range of usage contexts. Whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Web Components into your site in a lightweight, idiomatic fashion.
Quick start
Note: This guide assumes you have npm installed locally.
To get started using one of the Material Web Components in your web application, simply:
-
npm install it
npm install @material/mwc-button
-
Load the webcomponents polyfills (see the webcomponents polyfill Readme for more info).
-
import the element
<script type="module"> import {Button} from '@material/mwc-button'; </script>
-
Use the element on the page
<mwc-button label="Hi" icon="explore" raised></mwc-button>
Below are instructions for setting up project development.
git clone
this repo- install dependencies by running
npm run bootstrap
- to run a development server:
npm run dev
(view the demos by accessing<dev server url>
/demos/index.html) - to run tests:
npm run test
Rebuild CSS for components
Components define their css using SASS. The SASS output is built into a javascript module which exports the component's styling as a (lit-html)[https://github.com/Polymer/lit-html] template.
To compile the component SASS run
npm run update-styling
Useful Links
- All Components
- Demos
- Contributing
- Material.io (external site)
- Material Design Guidelines (external site)
Browser Support
We officially support the last two versions of every major browser. Specifically, we test on the following browsers:
- Chrome
- Safari
- Firefox
- IE 11/Edge
- Opera
- Mobile Safari
- Chrome on Android