mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +03:00
commit
3e09ed34ff
26
README.md
26
README.md
@ -1,10 +1,16 @@
|
|||||||
# Material Web Components
|
# 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).
|
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.
|
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/)**
|
**[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:
|
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
|
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">
|
<script type="module">
|
||||||
import {Button} from '@material/mwc-button';
|
import {Button} from '@material/mwc-button';
|
||||||
</script>
|
</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>
|
<mwc-button label="Hi" icon="explore" raised></mwc-button>
|
||||||
```
|
```
|
||||||
|
## Contributing guide
|
||||||
Below are instructions for setting up project development.
|
Below are instructions for setting up project development.
|
||||||
|
|
||||||
1. `git clone` this repo
|
1. `git clone` this repo
|
||||||
@ -45,9 +51,9 @@ Below are instructions for setting up project development.
|
|||||||
|
|
||||||
### Rebuild CSS for components
|
### 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
|
npm run update-styling
|
||||||
|
Loading…
Reference in New Issue
Block a user