mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 14:07:17 +03:00
173 lines
6.2 KiB
HTML
173 lines
6.2 KiB
HTML
<!doctype html>
|
|
<!--
|
|
@license
|
|
Copyright 2018 Google Inc. All Rights Reserved.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>button demo</title>
|
|
<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">
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
|
|
<style>
|
|
mwc-button {
|
|
margin: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="unresolved">
|
|
<header>
|
|
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
|
|
<span>Buttons</span></a>
|
|
</header>
|
|
|
|
<main>
|
|
<h2>Standard</h2>
|
|
<div class="demo-group wrap">
|
|
<mwc-button label="standard"></mwc-button>
|
|
<mwc-button label="standard" icon="code"></mwc-button>
|
|
</div>
|
|
|
|
<h2>Outlined</h2>
|
|
<div class="demo-group wrap">
|
|
<mwc-button outlined label="outlined"></mwc-button>
|
|
<mwc-button outlined label="outlined" icon="code"></mwc-button>
|
|
</div>
|
|
|
|
<h2>Raised</h2>
|
|
<div class="demo-group wrap">
|
|
<mwc-button raised label="raised"></mwc-button>
|
|
<mwc-button raised label="raised" icon="code"></mwc-button>
|
|
</div>
|
|
|
|
<h2>Unelevated</h2>
|
|
<div class="demo-group wrap">
|
|
<mwc-button unelevated label="unelevated"></mwc-button>
|
|
<mwc-button unelevated label="unelevated" icon="code"></mwc-button>
|
|
</div>
|
|
|
|
<h2>Dense</h2>
|
|
<div class="demo-group wrap">
|
|
<mwc-button dense unelevated label="dense"></mwc-button>
|
|
<mwc-button dense unelevated label="dense" icon="code"></mwc-button>
|
|
</div>
|
|
|
|
<h2>Trailing icon</h2>
|
|
<div class="demo-group wrap">
|
|
<mwc-button label="trailing icon" icon="code" trailingIcon></mwc-button>
|
|
<mwc-button outlined label="trailing icon" icon="code" trailingIcon></mwc-button>
|
|
<mwc-button raised label="trailing icon" icon="code" trailingIcon></mwc-button>
|
|
<mwc-button unelevated label="trailing icon" icon="code" trailingIcon></mwc-button>
|
|
</div>
|
|
|
|
<h2>Disabled</h2>
|
|
<div class="demo-group wrap">
|
|
<mwc-button disabled label="disabled" icon="code"></mwc-button>
|
|
<mwc-button disabled outlined label="disabled" icon="code"></mwc-button>
|
|
<mwc-button disabled raised label="disabled" icon="code"></mwc-button>
|
|
<mwc-button disabled unelevated label="disabled" icon="code"></mwc-button>
|
|
</div>
|
|
|
|
<h2>Styling</h2>
|
|
<style data-pre="main-colors">
|
|
.main-colors {
|
|
--mdc-theme-primary: darkgreen;
|
|
--mdc-theme-on-primary: aqua;
|
|
--mdc-button-disabled-fill-color: darkseagreen;
|
|
--mdc-button-disabled-ink-color: aliceblue;
|
|
}
|
|
</style>
|
|
<pre id="main-colors"></pre>
|
|
<div class="demo-group wrap main-colors">
|
|
<mwc-button icon="code" label="standard"></mwc-button>
|
|
<mwc-button outlined icon="code" label="outlined"></mwc-button>
|
|
<mwc-button raised icon="code" label="raised"></mwc-button>
|
|
<mwc-button raised icon="code" label="raised-disabled" disabled></mwc-button>
|
|
<mwc-button unelevated icon="code" label="unelevated"></mwc-button>
|
|
<mwc-button unelevated icon="code" label="unelevated-disabled" disabled></mwc-button>
|
|
</div>
|
|
|
|
<style data-pre="text">
|
|
.text {
|
|
--mdc-button-text-transform: lowercase;
|
|
--mdc-button-letter-spacing: 5px;
|
|
}
|
|
</style>
|
|
<pre id="text"></pre>
|
|
<div class="demo-group wrap text">
|
|
<mwc-button icon="code" label="lowerspace"></mwc-button>
|
|
<mwc-button outlined icon="code" label="lowerspace"></mwc-button>
|
|
<mwc-button raised icon="code" label="lowerspace"></mwc-button>
|
|
<mwc-button unelevated icon="code" label="lowerspace"></mwc-button>
|
|
</div>
|
|
|
|
<style data-pre="horizontal-padding">
|
|
.horizontal-padding {
|
|
--mdc-button-horizontal-padding: 50px;
|
|
}
|
|
</style>
|
|
<pre id="horizontal-padding"></pre>
|
|
<div class="demo-group wrap horizontal-padding">
|
|
<mwc-button icon="code" label="padding"></mwc-button>
|
|
<mwc-button outlined icon="code" label="padding"></mwc-button>
|
|
<mwc-button raised icon="code" label="padding"></mwc-button>
|
|
<mwc-button unelevated icon="code" label="padding"></mwc-button>
|
|
</div>
|
|
|
|
<style data-pre="outline">
|
|
.outline .themed {
|
|
--mdc-theme-primary: royalblue;
|
|
--mdc-button-disabled-ink-color: powderblue;
|
|
}
|
|
|
|
.outline .outline-different {
|
|
--mdc-button-outline-color: darkgreen;
|
|
--mdc-button-disabled-outline-color: palegreen;
|
|
--mdc-button-disabled-ink-color: plum;
|
|
}
|
|
|
|
.outline .width {
|
|
--mdc-button-outline-width: 5px;
|
|
}
|
|
</style>
|
|
<pre id="outline"></pre>
|
|
<div class="demo-group wrap outline">
|
|
<mwc-button outlined class="themed" icon="code" label="themed"></mwc-button>
|
|
<mwc-button outlined class="themed" disabled icon="code" label="themed"></mwc-button>
|
|
<mwc-button outlined class="outline-different" icon="code" label="outline-different"></mwc-button>
|
|
<mwc-button outlined class="outline-different" disabled icon="code" label="outline-different"></mwc-button>
|
|
<mwc-button outlined class="width" icon="code" label="width"></mwc-button>
|
|
<mwc-button outlined class="width" disabled icon="code" label="width"></mwc-button>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
document.querySelectorAll('style[data-pre]').forEach(function(e) {
|
|
const preId = e.dataset.pre;
|
|
const pre = document.querySelector('#' + preId);
|
|
if (pre) {
|
|
pre.innerText = e.innerText;
|
|
}
|
|
});
|
|
|
|
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
|
</script>
|
|
</body>
|
|
</html>
|