Skip to content

Instantly share code, notes, and snippets.

@sorvell

sorvell/index.html

Created May 8, 2018 22:44
Show Gist options
  • Save sorvell/2ec11ccde449815bc97edc1026be27a9 to your computer and use it in GitHub Desktop.
Save sorvell/2ec11ccde449815bc97edc1026be27a9 to your computer and use it in GitHub Desktop.
Download ZIP
Material Web Components
Raw
index.html
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
<script type="module" src="https://unpkg.com/@material/mwc-button@^0.1.0/mwc-button.js?module"></script>
<script type="module" src="https://unpkg.com/@material/mwc-fab@^0.1.0/mwc-fab.js?module"></script>
<script type="module" src="https://unpkg.com/@material/mwc-icon@^0.1.0/mwc-icon.js?module"></script>
<script type="module" src="https://unpkg.com/@material/mwc-checkbox@^0.1.0/mwc-checkbox.js?module"></script>
<script type="module" src="https://unpkg.com/@material/mwc-radio@^0.1.0/mwc-radio.js?module"></script>
<script type="module" src="https://unpkg.com/@material/mwc-switch@^0.1.0/mwc-switch.js?module"></script>
<script type="module" src="https://unpkg.com/@material/mwc-ripple@^0.1.0/mwc-ripple.js?module"></script>
</head>
<body class="notDefined">
<h2>Material Web Components</h2>
<h3>Button</h3>
<div class="group">
<mwc-button icon="map" raised>Hi there</mwc-button>
<mwc-button class="special">I'm a button too</mwc-button>
</div>
<h3>Fab</h3>
<div class="group">
<mwc-fab icon="map"></mwc-fab>
<mwc-fab icon="explore" class="light"></mwc-fab>
<mwc-fab icon="code" class="special"></mwc-fab>
</div>
<h3>Icon</h3>
<div class="group">
<mwc-icon>map</mwc-icon>
<mwc-icon class="light-icon">explore</mwc-icon>
<mwc-icon class="special-icon">code</mwc-icon>
</div>
<h3>Checkbox</h3>
<div class="group">
<mwc-checkbox></mwc-checkbox>
<mwc-checkbox checked></mwc-checkbox>
<mwc-checkbox indeterminate class="special"></mwc-checkbox>
</div>
<h3>Radio</h3>
<div class="group">
<mwc-radio></mwc-radio>
<mwc-radio></mwc-radio>
<mwc-radio checked class="special"></mwc-radio>
</div>
<div class="group">
<mwc-radio name="1" checked class="special"></mwc-radio>
<mwc-radio name="1"></mwc-radio>
<mwc-radio name="1"></mwc-radio>
</div>
<h3>Switch</h3>
<div class="group">
<mwc-switch></mwc-switch>
<mwc-switch checked class="special"></mwc-switch>
</div>
<h3>Ripple</h3>
<div class="group">
<div class="box3">
Ripple Me
<mwc-ripple></mwc-ripple>
</div>
<div class="box3">
Primary
<mwc-ripple primary></mwc-ripple>
</div>
<div class="box3">
Accent
<mwc-ripple accent></mwc-ripple>
</div>
</div>
<style>
body {
font-family: Google sans, sans-serif;
transform: opacity 0.2s;
}
body.notDefined {
opacity: 0;
}
.box3 {
height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid gray;
border-radius: 8px;
}
.group {
display: flex;
}
.group > * {
margin: 8px;
}
.light {
--mdc-theme-on-primary: black;
--mdc-theme-primary: white;
--mdc-theme-on-secondary: black;
--mdc-theme-secondary: white;
}
.special {
--mdc-theme-on-primary: white;
--mdc-theme-primary: #e9437a;
--mdc-theme-on-secondary: white;
--mdc-theme-secondary: #e9437a;
}
.light-icon {
color: gray;
}
.special-icon {
color: #e9437a;
}
</style>
<script>
addEventListener('WebComponentsReady', () => document.body.classList.remove('notDefined'))
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment