mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 17:40:40 +03:00
commit
3e09ed34ff
26
README.md
26
README.md
@ -1,10 +1,16 @@
|
||||
# Material Web Components
|
||||
|
||||
> Warning: These components are still a work in progress.
|
||||
|
||||
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 +20,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 +51,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
|
||||
|
Loading…
Reference in New Issue
Block a user