material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 09:30:27 +03:00
Code Issues Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Sam Li 2018-04-26 11:19:41 -07:00 committed by GitHub
parent cb2387da8f
commit 3aa0c1017c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@ -1,10 +1,18 @@
# Material Web Components
<blockquote>
Warning: These components are still a work in progress.
</blockquote>
Material Web Components helps developers execute [Material Design](https://www.material.io) using [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
Built on top of the [Material Components Web](https://github.com/material-components/material-components-web) project and [LitElement](https://github.com/polymerlabs/lit-element), 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.
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.
<!-- TODO
Insert screenshot of a demo page, including a code snippet.
-->
**[Demos](demos/)**
@ -14,28 +22,28 @@ Web Components can be seamlessly incorporated into a wide range of usage context
To get started using one of the Material Web Components in your web application, simply:
1. npm install it
1. Install each element you'd like to use:
```
npm install @material/mwc-button
```
1. Load the webcomponents polyfills (see the [webcomponents polyfill Readme](https://github.com/webcomponents/webcomponentsjs/blob/v2/README.md) for more info).
1. Load the webcomponents polyfills (see the [webcomponents polyfill readme](https://github.com/webcomponents/webcomponentsjs/blob/v2/README.md) for more info).
1. import the element
1. Import the element:
```
```html
<script type="module">
import {Button} from '@material/mwc-button';
</script>
```
1. Use the element on the page
1. Use the element on the page:
```
```html
<mwc-button label="Hi" icon="explore" raised></mwc-button>
```
## Contributing guide
Below are instructions for setting up project development.
1. `git clone` this repo
@ -45,9 +53,9 @@ Below are instructions for setting up project development.
### Rebuild CSS for components
Components define their css using [SASS](http://sass-lang.com/). 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.
Components define their css using [SASS](http://sass-lang.com/). 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
To compile the component SASS run:
```
npm run update-styling