From a817c8c3518b1b82b78419cac2c0e3d2995faa1e Mon Sep 17 00:00:00 2001 From: Daniel Freedman Date: Mon, 7 May 2018 16:16:51 -0700 Subject: [PATCH 1/4] add repo info to package.json --- packages/base/package.json | 5 ++++- packages/button/package.json | 4 ++++ packages/checkbox/package.json | 4 ++++ packages/fab/package.json | 4 ++++ packages/icon/package.json | 4 ++++ packages/radio/package.json | 4 ++++ packages/ripple/package.json | 4 ++++ packages/switch/package.json | 4 ++++ 8 files changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/base/package.json b/packages/base/package.json index 6ebac730a..c4490ddb4 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -5,7 +5,10 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, - "author": "", + "repository": { + "type": "git", + "url": "https://github.com/material-components/material-components-web-components.git" + }, "license": "Apache-2.0", "dependencies": { "@polymer/lit-element": "^0.4.0" diff --git a/packages/button/package.json b/packages/button/package.json index e674af672..20e996ac5 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "description": "", "main": "mwc-button.js", + "repository": { + "type": "git", + "url": "https://github.com/material-components/material-components-web-components.git" + }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index 3db967298..9ae2d6c05 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "description": "", "main": "mwc-checkbox.js", + "repository": { + "type": "git", + "url": "https://github.com/material-components/material-components-web-components.git" + }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/packages/fab/package.json b/packages/fab/package.json index dd1854c1d..8a35ab9e6 100644 --- a/packages/fab/package.json +++ b/packages/fab/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "description": "", "main": "mwc-fab.js", + "repository": { + "type": "git", + "url": "https://github.com/material-components/material-components-web-components.git" + }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/packages/icon/package.json b/packages/icon/package.json index cce7f8909..837c4ecff 100644 --- a/packages/icon/package.json +++ b/packages/icon/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "description": "", "main": "mwc-icon.js", + "repository": { + "type": "git", + "url": "https://github.com/material-components/material-components-web-components.git" + }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/packages/radio/package.json b/packages/radio/package.json index 6789bb45d..a5a2eefbc 100644 --- a/packages/radio/package.json +++ b/packages/radio/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "description": "", "main": "mwc-radio.js", + "repository": { + "type": "git", + "url": "https://github.com/material-components/material-components-web-components.git" + }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/packages/ripple/package.json b/packages/ripple/package.json index ef85a6dc7..9e4a4e3ad 100644 --- a/packages/ripple/package.json +++ b/packages/ripple/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "description": "", "main": "mwc-ripple.js", + "repository": { + "type": "git", + "url": "https://github.com/material-components/material-components-web-components.git" + }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/packages/switch/package.json b/packages/switch/package.json index fc6b23ff7..560660d3e 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "description": "", "main": "mwc-switch.js", + "repository": { + "type": "git", + "url": "https://github.com/material-components/material-components-web-components.git" + }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, From ac682e211718800661b7a6570409da13b19dee5a Mon Sep 17 00:00:00 2001 From: Daniel Freedman Date: Mon, 7 May 2018 16:22:43 -0700 Subject: [PATCH 2/4] v0.1.0 --- lerna.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lerna.json b/lerna.json index 73a0b94a4..c0fb36ed5 100644 --- a/lerna.json +++ b/lerna.json @@ -3,5 +3,5 @@ "packages": [ "packages/*" ], - "version": "0.0.0" + "version": "0.1.0" } From 5d9ba6a20b10fb0f44624aff4f1f3743923ae96a Mon Sep 17 00:00:00 2001 From: Daniel Freedman Date: Mon, 7 May 2018 16:55:02 -0700 Subject: [PATCH 3/4] Finish icon readme --- packages/icon/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/icon/README.md b/packages/icon/README.md index 919724dac..af884087c 100644 --- a/packages/icon/README.md +++ b/packages/icon/README.md @@ -5,12 +5,12 @@ A [Material Components](https://material.io/components/) icon implementation usi * The easiest way to try out mwc-icon is to use one of these online tools: -* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/lit-element-example?file=index.js), [Glitch](https://glitch.com/edit/#!/hello-lit-element?path=index.html) +* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) -* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/zezilad/edit?html,output), -[CodePen](https://codepen.io/sorvell/pen/BxZgPN). +* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), +[CodePen](https://codepen.io/azakus/pen/deZLja). -* You can also copy [this HTML file](https://gist.githubusercontent.com/sorvell/48f4b7be35c8748e8f6db5c66d36ee29/raw/2427328cf1ebae5077902a6bff5ddd8db45e83e4/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). +* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). * When you're ready to use mwc-icon in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows. From 391873a11e4e96ea6b28225c9ac1b16d9c9564ae Mon Sep 17 00:00:00 2001 From: Daniel Freedman Date: Mon, 7 May 2018 17:02:26 -0700 Subject: [PATCH 4/4] Copy icon example to other packages --- packages/button/README.md | 61 +++++++++++++++++++++++++++++++++++++ packages/checkbox/README.md | 61 +++++++++++++++++++++++++++++++++++++ packages/fab/README.md | 61 +++++++++++++++++++++++++++++++++++++ packages/radio/README.md | 61 +++++++++++++++++++++++++++++++++++++ packages/ripple/README.md | 61 +++++++++++++++++++++++++++++++++++++ packages/switch/README.md | 61 +++++++++++++++++++++++++++++++++++++ 6 files changed, 366 insertions(+) create mode 100644 packages/button/README.md create mode 100644 packages/checkbox/README.md create mode 100644 packages/fab/README.md create mode 100644 packages/radio/README.md create mode 100644 packages/ripple/README.md create mode 100644 packages/switch/README.md diff --git a/packages/button/README.md b/packages/button/README.md new file mode 100644 index 000000000..731da47bf --- /dev/null +++ b/packages/button/README.md @@ -0,0 +1,61 @@ +# mwc-button +A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction) + +## Getting started + + * The easiest way to try out mwc-button is to use one of these online tools: + +* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + +* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), +[CodePen](https://codepen.io/azakus/pen/deZLja). + +* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). + +* When you're ready to use mwc-button in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows. + + 1. Ensure the webcomponents polyfills are included in your HTML page + + - Install webcomponents polyfills + + ```npm i @webcomponents/webcomponentsjs``` + + - Add webcomponents polyfills to your HTML page + + `````` + + 1. Add mwc-button to your project: + + ```npm i @material/mwc-button``` + + 1. Import the mwc-button definition into your HTML page: + + `````` + + Or into your module script: + + ```import {Button} from "@material/mwc-button"``` + + 1. Create an instance of mwc-button in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/): + + ```Click Here!``` + + 1. Install the Polymer CLI: + + ```npm i -g polymer-cli@next``` + + 1. Run the development server and open a browser pointing to its URL: + + ```polymer serve``` + + > mwc-button is published on [npm](https://www.npmjs.com/package/@material/mwc-button) using JavaScript Modules. + This means it can take advantage of the standard native JavaScript module loader available in all current major browsers. + > + > However, since mwc-button uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform. + + Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-button. + +## Supported Browsers + +The last 2 versions of all modern browsers are supported, including +Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported. \ No newline at end of file diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md new file mode 100644 index 000000000..9d1b5ffde --- /dev/null +++ b/packages/checkbox/README.md @@ -0,0 +1,61 @@ +# mwc-checkbox +A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction) + +## Getting started + + * The easiest way to try out mwc-checkbox is to use one of these online tools: + +* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + +* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), +[CodePen](https://codepen.io/azakus/pen/deZLja). + +* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). + +* When you're ready to use mwc-checkbox in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows. + + 1. Ensure the webcomponents polyfills are included in your HTML page + + - Install webcomponents polyfills + + ```npm i @webcomponents/webcomponentsjs``` + + - Add webcomponents polyfills to your HTML page + + `````` + + 1. Add mwc-checkbox to your project: + + ```npm i @material/mwc-checkbox``` + + 1. Import the mwc-checkbox definition into your HTML page: + + `````` + + Or into your module script: + + ```import {Checkbox} from "@material/mwc-checkbox"``` + + 1. Create an instance of mwc-checkbox in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/): + + `````` + + 1. Install the Polymer CLI: + + ```npm i -g polymer-cli@next``` + + 1. Run the development server and open a browser pointing to its URL: + + ```polymer serve``` + + > mwc-checkbox is published on [npm](https://www.npmjs.com/package/@material/mwc-checkbox) using JavaScript Modules. + This means it can take advantage of the standard native JavaScript module loader available in all current major browsers. + > + > However, since mwc-checkbox uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform. + + Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-checkbox. + +## Supported Browsers + +The last 2 versions of all modern browsers are supported, including +Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported. \ No newline at end of file diff --git a/packages/fab/README.md b/packages/fab/README.md new file mode 100644 index 000000000..af0085da4 --- /dev/null +++ b/packages/fab/README.md @@ -0,0 +1,61 @@ +# mwc-fab +A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction) + +## Getting started + + * The easiest way to try out mwc-fab is to use one of these online tools: + +* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + +* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), +[CodePen](https://codepen.io/azakus/pen/deZLja). + +* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). + +* When you're ready to use mwc-fab in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows. + + 1. Ensure the webcomponents polyfills are included in your HTML page + + - Install webcomponents polyfills + + ```npm i @webcomponents/webcomponentsjs``` + + - Add webcomponents polyfills to your HTML page + + `````` + + 1. Add mwc-fab to your project: + + ```npm i @material/mwc-fab``` + + 1. Import the mwc-fab definition into your HTML page: + + `````` + + Or into your module script: + + ```import {Fab} from "@material/mwc-fab"``` + + 1. Create an instance of mwc-fab in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/): + + ```sentiment_very_satisfied``` + + 1. Install the Polymer CLI: + + ```npm i -g polymer-cli@next``` + + 1. Run the development server and open a browser pointing to its URL: + + ```polymer serve``` + + > mwc-fab is published on [npm](https://www.npmjs.com/package/@material/mwc-fab) using JavaScript Modules. + This means it can take advantage of the standard native JavaScript module loader available in all current major browsers. + > + > However, since mwc-fab uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform. + + Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-fab. + +## Supported Browsers + +The last 2 versions of all modern browsers are supported, including +Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported. \ No newline at end of file diff --git a/packages/radio/README.md b/packages/radio/README.md new file mode 100644 index 000000000..586d0424d --- /dev/null +++ b/packages/radio/README.md @@ -0,0 +1,61 @@ +# mwc-radio +A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction) + +## Getting started + + * The easiest way to try out mwc-radio is to use one of these online tools: + +* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + +* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), +[CodePen](https://codepen.io/azakus/pen/deZLja). + +* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). + +* When you're ready to use mwc-radio in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows. + + 1. Ensure the webcomponents polyfills are included in your HTML page + + - Install webcomponents polyfills + + ```npm i @webcomponents/webcomponentsjs``` + + - Add webcomponents polyfills to your HTML page + + `````` + + 1. Add mwc-radio to your project: + + ```npm i @material/mwc-radio``` + + 1. Import the mwc-radio definition into your HTML page: + + `````` + + Or into your module script: + + ```import {Radio} from "@material/mwc-radio"``` + + 1. Create an instance of mwc-radio in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/): + + `````` + + 1. Install the Polymer CLI: + + ```npm i -g polymer-cli@next``` + + 1. Run the development server and open a browser pointing to its URL: + + ```polymer serve``` + + > mwc-radio is published on [npm](https://www.npmjs.com/package/@material/mwc-radio) using JavaScript Modules. + This means it can take advantage of the standard native JavaScript module loader available in all current major browsers. + > + > However, since mwc-radio uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform. + + Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-radio. + +## Supported Browsers + +The last 2 versions of all modern browsers are supported, including +Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported. \ No newline at end of file diff --git a/packages/ripple/README.md b/packages/ripple/README.md new file mode 100644 index 000000000..2be28b656 --- /dev/null +++ b/packages/ripple/README.md @@ -0,0 +1,61 @@ +# mwc-ripple +A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction) + +## Getting started + + * The easiest way to try out mwc-ripple is to use one of these online tools: + +* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + +* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), +[CodePen](https://codepen.io/azakus/pen/deZLja). + +* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). + +* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows. + + 1. Ensure the webcomponents polyfills are included in your HTML page + + - Install webcomponents polyfills + + ```npm i @webcomponents/webcomponentsjs``` + + - Add webcomponents polyfills to your HTML page + + `````` + + 1. Add mwc-ripple to your project: + + ```npm i @material/mwc-ripple``` + + 1. Import the mwc-ripple definition into your HTML page: + + `````` + + Or into your module script: + + ```import {Ripple} from "@material/mwc-ripple"``` + + 1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/): + + `````` + + 1. Install the Polymer CLI: + + ```npm i -g polymer-cli@next``` + + 1. Run the development server and open a browser pointing to its URL: + + ```polymer serve``` + + > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules. + This means it can take advantage of the standard native JavaScript module loader available in all current major browsers. + > + > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform. + + Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple. + +## Supported Browsers + +The last 2 versions of all modern browsers are supported, including +Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported. \ No newline at end of file diff --git a/packages/switch/README.md b/packages/switch/README.md new file mode 100644 index 000000000..d5a95fe72 --- /dev/null +++ b/packages/switch/README.md @@ -0,0 +1,61 @@ +# mwc-switch +A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction) + +## Getting started + + * The easiest way to try out mwc-switch is to use one of these online tools: + +* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + +* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), +[CodePen](https://codepen.io/azakus/pen/deZLja). + +* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). + +* When you're ready to use mwc-switch in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows. + + 1. Ensure the webcomponents polyfills are included in your HTML page + + - Install webcomponents polyfills + + ```npm i @webcomponents/webcomponentsjs``` + + - Add webcomponents polyfills to your HTML page + + `````` + + 1. Add mwc-switch to your project: + + ```npm i @material/mwc-switch``` + + 1. Import the mwc-switch definition into your HTML page: + + `````` + + Or into your module script: + + ```import {Switch} from "@material/mwc-switch"``` + + 1. Create an instance of mwc-switch in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/): + + ```sentiment_very_satisfied``` + + 1. Install the Polymer CLI: + + ```npm i -g polymer-cli@next``` + + 1. Run the development server and open a browser pointing to its URL: + + ```polymer serve``` + + > mwc-switch is published on [npm](https://www.npmjs.com/package/@material/mwc-switch) using JavaScript Modules. + This means it can take advantage of the standard native JavaScript module loader available in all current major browsers. + > + > However, since mwc-switch uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform. + + Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-switch. + +## Supported Browsers + +The last 2 versions of all modern browsers are supported, including +Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported. \ No newline at end of file