mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
Merge branch 'master' into publish-demos
This commit is contained in:
commit
55b0c36dcb
0
build-entrypoint.html
Normal file
0
build-entrypoint.html
Normal file
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>button demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
@ -44,7 +45,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Buttons</span></a>
|
||||
</header>
|
||||
|
||||
@ -57,7 +58,6 @@ limitations under the License.
|
||||
<mwc-button class="light" raised label="raised"></mwc-button>
|
||||
<mwc-button unelevated label="unelevated"></mwc-button>
|
||||
<mwc-button class="pink" dense label="dense"></mwc-button>
|
||||
<mwc-button compact label="compact"></mwc-button>
|
||||
<mwc-button class="pink wide" raised label="wide"></mwc-button>
|
||||
<mwc-button disabled label="disabled"></mwc-button>
|
||||
</div>
|
||||
@ -69,7 +69,6 @@ limitations under the License.
|
||||
<mwc-button class="light" raised label="raised" icon="code"></mwc-button>
|
||||
<mwc-button unelevated label="unelevated" icon="check"></mwc-button>
|
||||
<mwc-button class="pink" dense label="dense" icon="feedback"></mwc-button>
|
||||
<mwc-button compact label="compact" icon="gavel"></mwc-button>
|
||||
<mwc-button class="pink wide" raised label="wide" icon="code"></mwc-button>
|
||||
<mwc-button disabled label="disabled" icon="fingerprint"></mwc-button>
|
||||
</div>
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>card demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
@ -47,14 +48,14 @@ limitations under the License.
|
||||
<script type="module">
|
||||
import {style as cardStyle} from '../node_modules/@material/mwc-card/mwc-card-css.js';
|
||||
import {style as typographyStyle} from '../node_modules/@material/mwc-typography/mwc-typography-css.js';
|
||||
import {LitElement, html} from '../../@polymer/lit-element/lit-element.js';
|
||||
import {LitElement, html} from '../node_modules/@polymer/lit-element/lit-element.js';
|
||||
import '../node_modules/@material/mwc-button/mwc-button.js';
|
||||
import '../node_modules/@material/mwc-icon/mwc-icon.js';
|
||||
import '../node_modules/@material/mwc-icon-toggle/mwc-icon-toggle.js';
|
||||
import '../node_modules/@material/mwc-ripple/mwc-ripple.js';
|
||||
|
||||
class DemoCard extends LitElement {
|
||||
render() {
|
||||
_render() {
|
||||
return html`
|
||||
${cardStyle}${typographyStyle}
|
||||
<style>
|
||||
|
@ -18,14 +18,15 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>checkbox demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-checkbox/mwc-checkbox.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Checkbox</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>chips demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-chips/mwc-chip.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-chips/mwc-chip-set.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
@ -32,7 +33,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Chips</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>dialog demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-dialog/mwc-dialog.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
@ -37,7 +38,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Dialog</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>fab demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-fab/mwc-fab.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
@ -51,7 +52,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>FAB</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>formfield demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-formfield/mwc-formfield.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-checkbox/mwc-checkbox.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-radio/mwc-radio.js"></script>
|
||||
@ -29,7 +30,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Formfield</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>icon-toggle demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon-toggle/mwc-icon-toggle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
@ -31,7 +32,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Icon Toggle</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>icon demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
<style>
|
||||
@ -31,7 +32,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Icon</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,18 +18,19 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>Material Web Components Catalog</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body>
|
||||
<demo-view></demo-view>
|
||||
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module">
|
||||
import {LitElement, html} from '@polymer/lit-element';
|
||||
import {style as listStyle} from '@material/mwc-list/mwc-list-item-css.js';
|
||||
|
||||
class DemoView extends LitElement {
|
||||
render() {
|
||||
_render() {
|
||||
return html`
|
||||
${listStyle}
|
||||
<style>
|
||||
@ -105,20 +106,20 @@ limitations under the License.
|
||||
<span class="mdc-list-item__secondary-text">Multi-selection controls</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="chips.html">
|
||||
<!-- <a role="listitem" class="mdc-list-item" href="chips.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_chips_24dp.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Chips
|
||||
<span class="mdc-list-item__secondary-text">Chips for actions, selection, and input</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="dialog.html">
|
||||
</a> -->
|
||||
<!-- <a role="listitem" class="mdc-list-item" href="dialog.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_dialog_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Dialog
|
||||
<span class="mdc-list-item__secondary-text">Interactive presentation of important information</span>
|
||||
</span>
|
||||
</a>
|
||||
</a> -->
|
||||
<a role="listitem" class="mdc-list-item" href="formfield.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_text_field_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
@ -147,13 +148,13 @@ limitations under the License.
|
||||
<span class="mdc-list-item__secondary-text">Fills from 0% to 100%, represented by bars</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="menu.html">
|
||||
<!-- <a role="listitem" class="mdc-list-item" href="menu.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_menu_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Menu
|
||||
<span class="mdc-list-item__secondary-text">Pop over menus</span>
|
||||
</span>
|
||||
</a>
|
||||
</a> -->
|
||||
<a role="listitem" class="mdc-list-item" href="radio.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_radio_button_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
@ -168,13 +169,13 @@ limitations under the License.
|
||||
<span class="mdc-list-item__secondary-text">Touch ripple</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="select.html">
|
||||
<!-- <a role="listitem" class="mdc-list-item" href="select.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_menu_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Select
|
||||
<span class="mdc-list-item__secondary-text">Pop over selection menus</span>
|
||||
</span>
|
||||
</a>
|
||||
</a> -->
|
||||
<a role="listitem" class="mdc-list-item" href="slider.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/slider.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
@ -196,13 +197,13 @@ limitations under the License.
|
||||
<span class="mdc-list-item__secondary-text">On off switches</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="tabs.html">
|
||||
<!-- <a role="listitem" class="mdc-list-item" href="tabs.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_tabs_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Tabs
|
||||
<span class="mdc-list-item__secondary-text">Tabs with support for icon and text labels</spandiv>
|
||||
</span>
|
||||
</a>
|
||||
</a> -->
|
||||
<a role="listitem" class="mdc-list-item" href="textfield.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_text_field_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>linear-progress demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-linear-progress/mwc-linear-progress.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
@ -40,7 +41,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Linear Progress</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>menu demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-menu/mwc-menu.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-list/mwc-list-item.js"></script>
|
||||
@ -44,7 +45,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Menu</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,14 +18,15 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>radio demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-radio/mwc-radio.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Radio Button</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>ripple demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-ripple/mwc-ripple.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
@ -53,7 +54,7 @@ limitations under the License.
|
||||
<body class="unresolved">
|
||||
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Ripple</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>select demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-select/mwc-select.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
@ -38,7 +39,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Select</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>slider demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-slider/mwc-slider.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
@ -40,7 +41,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Slider</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>snackbar demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-snackbar/mwc-snackbar.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
@ -26,7 +27,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Snackbar</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,14 +18,15 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>switch demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-switch/mwc-switch.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Switch</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,7 +18,8 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>tabs demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-tabs/mwc-tab-bar-scroller.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-tabs/mwc-tab-bar.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-tabs/mwc-tab.js"></script>
|
||||
@ -27,7 +28,7 @@ limitations under the License.
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Tabs</span></a>
|
||||
</header>
|
||||
|
||||
|
@ -18,14 +18,15 @@ limitations under the License.
|
||||
<html>
|
||||
<head>
|
||||
<title>textfield demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-textfield/mwc-textfield.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
||||
<span>Text Field</span></a>
|
||||
</header>
|
||||
|
||||
|
869
package-lock.json
generated
869
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -19,6 +19,7 @@
|
||||
"update-styling": "./scripts/update-styling.sh"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webcomponents/webcomponentsjs": "^2.0.0-0",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-plugin-transform-object-assign": "^6.8.0",
|
||||
|
2
packages/base/README.md
Normal file
2
packages/base/README.md
Normal file
@ -0,0 +1,2 @@
|
||||
# mwc-base
|
||||
A suite of shared libraries and utility functions for [Material Components](https://material.io/components/)[Web Components](https://www.webcomponents.org/introduction)
|
@ -6,8 +6,11 @@
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
|
@ -60,7 +60,7 @@ export class Button extends LitElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({raised, unelevated, stroked, dense, compact, disabled, icon, label}) {
|
||||
_render({raised, unelevated, stroked, dense, compact, disabled, icon, label}) {
|
||||
const hostClasses = c$({
|
||||
'mdc-button--raised': raised,
|
||||
'mdc-button--unelevated': unelevated,
|
||||
|
@ -7,15 +7,18 @@
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/button": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-icon": "^0.1.0",
|
||||
"@material/mwc-ripple": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
|
@ -33,7 +33,7 @@ export class Card extends LitElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({stroke}) {
|
||||
_render({stroke}) {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class$="mdc-card ${stroke ? 'mdc-card--stroked' : ''}">
|
||||
|
@ -9,7 +9,7 @@
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/card": "^0.35.0",
|
||||
|
@ -59,7 +59,7 @@ export class Checkbox extends FormableComponentElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({checked, value}) {
|
||||
_render({checked, value}) {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class="mdc-checkbox">
|
||||
@ -67,14 +67,13 @@ export class Checkbox extends FormableComponentElement {
|
||||
class="mdc-checkbox__native-control"
|
||||
checked="${checked}" value="${value}"
|
||||
on-change="${this._boundInputChangeHandler}">
|
||||
<div class="mdc-checkbox__frame"></div>
|
||||
<div class="mdc-checkbox__background">
|
||||
<svg class="mdc-checkbox__checkmark"
|
||||
viewBox="0 0 24 24">
|
||||
<path class="mdc-checkbox__checkmark-path"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
d="M4.1,12.7 9,17.6 20.3,6.3"></path>
|
||||
<path class="mdc-checkbox__checkmark-path"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
|
||||
</svg>
|
||||
<div class="mdc-checkbox__mixedmark"></div>
|
||||
</div>
|
||||
|
@ -7,13 +7,16 @@
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/checkbox": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
|
@ -53,7 +53,7 @@ export class ChipSet extends ComponentElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({type}) {
|
||||
_render({type}) {
|
||||
const hostClasses = c$({
|
||||
'mdc-chip-set--choice': type == 'choice',
|
||||
'mdc-chip-set--filter': type == 'filter',
|
||||
|
@ -53,7 +53,7 @@ export class Chip extends ComponentElement {
|
||||
}
|
||||
|
||||
// TODO(sorvell): Note, nice to have vars for activated colors.
|
||||
render({leadingIcon, trailingIcon, label}) {
|
||||
_render({leadingIcon, trailingIcon, label}) {
|
||||
const leadingIconPart = leadingIcon ? html`<i class="material-icons mdc-chip__icon mdc-chip__icon--leading">${leadingIcon}</i>` : '';
|
||||
const trailingIconPart = trailingIcon ? html`<i class="material-icons mdc-chip__icon mdc-chip__icon--trailing">${trailingIcon}</i>` : '';
|
||||
// TODO(sorvell) #css: added display
|
||||
|
@ -12,7 +12,7 @@
|
||||
"@material/chips": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-icon": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
|
@ -77,7 +77,7 @@ export class Dialog extends ComponentElement {
|
||||
// TODO(sorvell): DialogFoundation's `isOff` method does not work with Shadow DOM
|
||||
// because it assumes a parentNode is parentElement (thing you can call getComputedStyle on)
|
||||
// TODO(sorvell) #css: added custom property
|
||||
render({headerLabel, acceptLabel, declineLabel, scrollable}) {
|
||||
_render({headerLabel, acceptLabel, declineLabel, scrollable}) {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<aside
|
||||
|
@ -12,7 +12,7 @@
|
||||
"@material/dialog": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-button": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0",
|
||||
"@polymer/lit-element": "^0.4.0",
|
||||
"blocking-elements": "^0.0.2",
|
||||
"wicg-inert": "^1.1.6"
|
||||
},
|
||||
|
@ -51,7 +51,7 @@ export class Fab extends LitElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({icon, mini, exited, disabled}) {
|
||||
_render({icon, mini, exited, disabled}) {
|
||||
const hostClasses = c$({
|
||||
'mdc-fab--mini': mini,
|
||||
'mdc-fab--exited': exited,
|
||||
|
@ -13,9 +13,12 @@
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-icon": "^0.1.0",
|
||||
"@material/mwc-ripple": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
|
@ -53,7 +53,7 @@ export class Formfield extends ComponentElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({label, alignEnd, _labelClickHandler}) {
|
||||
_render({label, alignEnd, _labelClickHandler}) {
|
||||
return html`${this._renderStyle()}
|
||||
<div class$="mdc-form-field ${alignEnd ? 'mdc-form-field--align-end' : ''}">
|
||||
<slot></slot>
|
||||
@ -61,7 +61,7 @@ export class Formfield extends ComponentElement {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
didRender(props, changed) {
|
||||
_didRender(props, changed) {
|
||||
if ('label' in changed && this._input) {
|
||||
if (this._input.localName == 'input') {
|
||||
this._input.setAttribute('aria-label', props.label);
|
||||
|
@ -11,7 +11,7 @@
|
||||
"dependencies": {
|
||||
"@material/form-field": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
|
@ -66,7 +66,7 @@ export class IconToggle extends ComponentElement {
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: added display
|
||||
render({on, disabled, icon, offIcon, label, offLabel}) {
|
||||
_render({on, disabled, icon, offIcon, label, offLabel}) {
|
||||
offIcon = offIcon || icon;
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
@ -80,7 +80,7 @@ export class IconToggle extends ComponentElement {
|
||||
</span>`;
|
||||
}
|
||||
|
||||
didRender(props, changed) {
|
||||
_didRender(props, changed) {
|
||||
if ('icon' in changed || 'label' in changed ||
|
||||
'offIcon' in changed || 'offLabel' in changed) {
|
||||
this.componentReady().then((component) => component.refreshToggleData());
|
||||
|
@ -12,7 +12,7 @@
|
||||
"@material/icon-toggle": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-icon": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
|
61
packages/icon/README.md
Normal file
61
packages/icon/README.md
Normal file
@ -0,0 +1,61 @@
|
||||
# mwc-icon
|
||||
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-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 browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/zezilad/edit?html,output),
|
||||
[CodePen](https://codepen.io/sorvell/pen/BxZgPN).
|
||||
|
||||
* 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)).
|
||||
|
||||
* 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.
|
||||
|
||||
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
|
||||
|
||||
```<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>```
|
||||
|
||||
1. Add mwc-icon to your project:
|
||||
|
||||
```npm i @material/mwc-icon```
|
||||
|
||||
1. Import the mwc-icon definition into your HTML page:
|
||||
|
||||
```<script type="module" src="@material/mwc-icon/index.js"></script>```
|
||||
|
||||
Or into your module script:
|
||||
|
||||
```import {Icon} from "@material/mwc-icon"```
|
||||
|
||||
1. Create an instance of mwc-icon in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):
|
||||
|
||||
```<mwc-icon>sentiment_very_satisfied</mwc-icon>```
|
||||
|
||||
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-icon is published on [npm](https://www.npmjs.com/package/@material/mwc-icon) 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-icon 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-icon.
|
||||
|
||||
## 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.
|
@ -22,7 +22,7 @@ export class Icon extends LitElement {
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
render() {
|
||||
_render() {
|
||||
return html`${this._renderStyle()}<slot></slot>`;
|
||||
}
|
||||
}
|
||||
|
@ -7,12 +7,15 @@
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
|
@ -53,7 +53,7 @@ export class LinearProgress extends ComponentElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render() {
|
||||
_render() {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div role="progressbar" class="mdc-linear-progress">
|
||||
@ -68,7 +68,7 @@ export class LinearProgress extends ComponentElement {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
async didRender(props, changed, old) {
|
||||
async _didRender(props, changed, old) {
|
||||
if ('determinate' in changed) {
|
||||
await this.componentReady();
|
||||
this._component.determinate = props.determinate;
|
||||
|
@ -11,7 +11,7 @@
|
||||
"dependencies": {
|
||||
"@material/linear-progress": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
|
@ -22,7 +22,7 @@ export class ListItemSeparator extends LitElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render() {
|
||||
_render() {
|
||||
return html`
|
||||
${style}
|
||||
<div class="mdc-list-divider" role="separator"></div>`;
|
||||
|
@ -39,7 +39,7 @@ export class ListItem extends LitElement {
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: add styling for disabled.
|
||||
render({label, icon, disabled}) {
|
||||
_render({label, icon, disabled}) {
|
||||
renderAttributes(this, {'aria-disabled': disabled ? 'true' : null});
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
|
@ -11,7 +11,7 @@
|
||||
"dependencies": {
|
||||
"@material/mwc-icon": "^0.1.0",
|
||||
"@material/list": "^0.35.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
|
@ -81,7 +81,7 @@ export class Menu extends ComponentElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render() {
|
||||
_render() {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class="mdc-menu" tabindex="-1">
|
||||
|
@ -12,7 +12,7 @@
|
||||
"@material/menu": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-list": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1",
|
||||
|
@ -66,7 +66,7 @@ export class Radio extends FormableComponentElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({checked, value, name}) {
|
||||
_render({checked, value, name}) {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class="mdc-radio">
|
||||
|
@ -11,9 +11,12 @@
|
||||
"dependencies": {
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/radio": "^0.35.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
|
@ -84,7 +84,7 @@ export class Ripple extends LitElement {
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: sizing.
|
||||
render({primary, accent, unbounded}) {
|
||||
_render({primary, accent, unbounded}) {
|
||||
const classes = c$({
|
||||
'mdc-ripple-surface--primary': primary,
|
||||
'mdc-ripple-surface--accent': accent,
|
||||
|
@ -7,13 +7,16 @@
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/ripple": "^0.35.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
|
@ -67,7 +67,7 @@ export class Select extends LitElement {
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: flex for sizing
|
||||
render({label, disabled, box}) {
|
||||
_render({label, disabled, box}) {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
|
@ -13,7 +13,7 @@
|
||||
"@material/mwc-list": "^0.1.0",
|
||||
"@material/mwc-menu": "^0.1.0",
|
||||
"@material/select": "^0.35.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
|
@ -70,7 +70,7 @@ export class Slider extends FormableComponentElement {
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: needs a default width
|
||||
render({disabled, step, min, max, value, discrete, markers}) {
|
||||
_render({disabled, step, min, max, value, discrete, markers}) {
|
||||
const hostClasses = c$({
|
||||
'mdc-slider--discrete': discrete,
|
||||
'mdc-slider--display-markers': markers && discrete,
|
||||
|
@ -11,7 +11,7 @@
|
||||
"dependencies": {
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/slider": "^0.35.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
|
@ -56,7 +56,7 @@ export class Snackbar extends ComponentElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({checked, value}) {
|
||||
_render({checked, value}) {
|
||||
return html`${this._renderStyle()}
|
||||
<div class="mdc-snackbar"
|
||||
aria-live="assertive"
|
||||
|
@ -11,7 +11,7 @@
|
||||
"dependencies": {
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/snackbar": "^0.35.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
|
@ -34,7 +34,7 @@ export class Switch extends LitElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({checked}) {
|
||||
_render({checked}) {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class="mdc-switch">
|
||||
|
@ -10,10 +10,13 @@
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1",
|
||||
"@material/switch": "^0.35.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
|
@ -63,7 +63,7 @@ export class TabBarScroller extends LitElement {
|
||||
return style;
|
||||
}
|
||||
|
||||
render() {
|
||||
_render() {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class="mdc-tab-bar-scroller">
|
||||
@ -89,7 +89,7 @@ export class TabBarScroller extends LitElement {
|
||||
await afterNextRender();
|
||||
await afterNextRender();
|
||||
this._makeComponent();
|
||||
this.invalidate();
|
||||
this._requestRender();
|
||||
}
|
||||
|
||||
_makeComponent() {
|
||||
|
@ -50,7 +50,7 @@ export class TabBar extends LitElement {
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: wrapping
|
||||
render() {
|
||||
_render() {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<nav class="mdc-tab-bar">
|
||||
@ -59,7 +59,7 @@ export class TabBar extends LitElement {
|
||||
</nav>`;
|
||||
}
|
||||
|
||||
didRender({activeTabIndex}, changed, old) {
|
||||
_didRender({activeTabIndex}, changed, old) {
|
||||
if (this._mdcComponent && (!old || (activeTabIndex !== old.activeTabIndex))) {
|
||||
this._mdcComponent.activeTabIndex = activeTabIndex;
|
||||
}
|
||||
@ -69,7 +69,7 @@ export class TabBar extends LitElement {
|
||||
super.ready();
|
||||
await afterNextRender();
|
||||
this._makeComponent();
|
||||
this.invalidate();
|
||||
this._requestRender();
|
||||
}
|
||||
|
||||
_makeComponent() {
|
||||
|
@ -43,7 +43,7 @@ export class Tab extends LitElement {
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: sizing with display:table!
|
||||
render({icon, label, href}) {
|
||||
_render({icon, label, href}) {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<style>
|
||||
|
@ -12,7 +12,7 @@
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-icon": "^0.1.0",
|
||||
"@material/tabs": "^0.35.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
|
@ -73,7 +73,7 @@ export class Textfield extends ComponentElement {
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: styling for fullwidth
|
||||
render({value, label, box, outlined, disabled, icon, iconTrailing, fullWidth, required, placeHolder, helperText, type}) {
|
||||
_render({value, label, box, outlined, disabled, icon, iconTrailing, fullWidth, required, placeHolder, helperText, type}) {
|
||||
const hostClasses = c$({
|
||||
'mdc-text-field--with-leading-icon': icon && !iconTrailing,
|
||||
'mdc-text-field--with-trailing-icon': icon && iconTrailing,
|
||||
|
@ -12,7 +12,7 @@
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-icon": "^0.1.0",
|
||||
"@material/textfield": "^0.35.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
"@polymer/lit-element": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
|
@ -9,7 +9,7 @@
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@polymer/lit-element": "^0.3.0",
|
||||
"@polymer/lit-element": "^0.4.0",
|
||||
"@material/mwc-icon": "^0.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
30
polymer.json
Normal file
30
polymer.json
Normal file
@ -0,0 +1,30 @@
|
||||
{
|
||||
"entrypoint": "build-entrypoint.html",
|
||||
"fragments": [
|
||||
"demos/index.html",
|
||||
"demos/button.html",
|
||||
"demos/card.html",
|
||||
"demos/checkbox.html",
|
||||
"demos/chips.html",
|
||||
"demos/dialog.html",
|
||||
"demos/fab.html",
|
||||
"demos/formfield.html",
|
||||
"demos/icon-toggle.html",
|
||||
"demos/icon.html",
|
||||
"demos/linear-progress.html",
|
||||
"demos/menu.html",
|
||||
"demos/radio.html",
|
||||
"demos/ripple.html",
|
||||
"demos/select.html",
|
||||
"demos/slider.html",
|
||||
"demos/snackbar.html",
|
||||
"demos/switch.html",
|
||||
"demos/tabs.html",
|
||||
"demos/textfield.html"
|
||||
],
|
||||
"builds": [
|
||||
{ "preset": "es5-unbundled" }
|
||||
],
|
||||
"moduleResolution": "node",
|
||||
"npm": true
|
||||
}
|
@ -19,7 +19,7 @@
|
||||
set -e
|
||||
|
||||
`npm bin`/lerna bootstrap --hoist
|
||||
`npm bin`/del-cli ${INIT_CWD}/packages/*/node_modules
|
||||
`npm bin`/lerna clean --yes
|
||||
|
||||
packages=(`find packages -name "package.json" | xargs -I '{}' dirname '{}'`)
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user