mirror of https://github.com/material-components/material-web.git synced 2024-10-26 21:56:56 +03:00

Steven Orvell 286d4733ce [first commit] lots of wip elements

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

2018-04-25 19:20:55 -07:00

2.4 KiB

Raw Blame History

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.

Demos

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