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
Warning: These components are still a work in progress.
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's 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:
-
Install each element you'd like to use:
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>
Contributing guide
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 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