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 |
||
---|---|---|
demos | ||
packages | ||
scripts | ||
test/unit | ||
.eslintignore | ||
.eslintrc.yaml | ||
.gitignore | ||
CHANGELOG.md | ||
CONTRIBUTING.md | ||
karma.conf.js | ||
lerna.json | ||
LICENSE | ||
package-lock.json | ||
package.json | ||
README.md | ||
sass-template.tmpl | ||
webpack.config.js |
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