mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 14:07:17 +03:00
243 lines
12 KiB
HTML
243 lines
12 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>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-bundle.js"></script>
|
|
<script type="module">
|
|
import {LitElement, html, css} from 'lit-element/lit-element.js';
|
|
import {style as listStyle} from './style/mwc-list-item-css.js';
|
|
|
|
class DemoView extends LitElement {
|
|
static get styles() {
|
|
return [
|
|
listStyle,
|
|
css`
|
|
header {
|
|
background-color: #6200ee;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 4;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
box-sizing: border-box;
|
|
font-family: "Roboto Mono", monospace;
|
|
-webkit-font-smoothing: antialiased;
|
|
font-size: 1.25rem;
|
|
line-height: 2rem;
|
|
letter-spacing: 0.02em;
|
|
color: white;
|
|
min-height: 64px;
|
|
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.demo-catalog-logo {
|
|
height: 48px;
|
|
width: 48px;
|
|
display: inline-block;
|
|
padding: 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.demo-list {
|
|
margin-top: 64px;
|
|
}
|
|
|
|
.demo-catalog-list-icon {
|
|
margin: 0 24px 0 12px;
|
|
}
|
|
|
|
.demo-heading {
|
|
margin-left: 8px;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<header>
|
|
<span class="demo-catalog-logo">
|
|
<img src="https://material-components-web.appspot.com/images/ic_component_24px_white.svg">
|
|
</span>
|
|
<span class="demo-heading">Material Web Components Catalog</span>
|
|
</header>
|
|
<div class="demo-list">
|
|
<div role="list" class="mdc-list mdc-list--two-line">
|
|
<a role="listitem" class="mdc-list-item" href="button.html">
|
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_button_24px.svg"></span>
|
|
<span class="mdc-list-item__text">
|
|
Button
|
|
<span class="mdc-list-item__secondary-text">Raised and flat buttons</span>
|
|
</span>
|
|
</a>
|
|
<a role="listitem" class="mdc-list-item" href="fab.html">
|
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_button_24px.svg"></span>
|
|
<span class="mdc-list-item__text">
|
|
Floating action button
|
|
<span class="mdc-list-item__secondary-text">The primary action in an application</span>
|
|
</span>
|
|
</a>
|
|
<a role="listitem" class="mdc-list-item" href="checkbox.html">
|
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_selection_control_24px.svg"></span>
|
|
<span class="mdc-list-item__text">
|
|
Checkbox
|
|
<span class="mdc-list-item__secondary-text">Multi-selection controls</span>
|
|
</span>
|
|
</a>
|
|
<!-- <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">
|
|
<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 role="listitem" class="mdc-list-item" href="drawer.html">
|
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
|
|
<span class="mdc-list-item__text">
|
|
Drawer
|
|
<span class="mdc-list-item__secondary-text">Multi-selection controls</span>
|
|
</span>
|
|
</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">
|
|
Form field
|
|
<span class="mdc-list-item__secondary-text">Layout form fields with labels</span>
|
|
</span>
|
|
</a>
|
|
<a role="listitem" class="mdc-list-item" href="icon.html">
|
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
|
|
<span class="mdc-list-item__text">
|
|
Icon
|
|
<span class="mdc-list-item__secondary-text">Material design icons</span>
|
|
</span>
|
|
</a>
|
|
<a role="listitem" class="mdc-list-item" href="icon-button.html">
|
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
|
|
<span class="mdc-list-item__text">
|
|
Icon Button
|
|
<span class="mdc-list-item__secondary-text">Toggling icon states</span>
|
|
</span>
|
|
</a>
|
|
<a role="listitem" class="mdc-list-item" href="linear-progress.html">
|
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_progress_activity.svg"></span>
|
|
<span class="mdc-list-item__text">
|
|
Linear Progress
|
|
<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">
|
|
<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 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">
|
|
Radio buttons
|
|
<span class="mdc-list-item__secondary-text">Single selection controls</span>
|
|
</span>
|
|
</a>
|
|
<a role="listitem" class="mdc-list-item" href="ripple.html">
|
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_ripple_24px.svg"></span>
|
|
<span class="mdc-list-item__text">
|
|
Ripple
|
|
<span class="mdc-list-item__secondary-text">Touch ripple</span>
|
|
</span>
|
|
</a>
|
|
<!-- <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 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">
|
|
Slider
|
|
<span class="mdc-list-item__secondary-text">Range controls</span>
|
|
</span>
|
|
</a> -->
|
|
<!-- <a role="listitem" class="mdc-list-item" href="snackbar.html">
|
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_toast_24px.svg"></span>
|
|
<span class="mdc-list-item__text">
|
|
Snackbar
|
|
<span class="mdc-list-item__secondary-text">Transient messages</span>
|
|
</span>
|
|
</a> -->
|
|
<a role="listitem" class="mdc-list-item" href="switch.html">
|
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_switch_24px.svg"></span>
|
|
<span class="mdc-list-item__text">
|
|
Switch
|
|
<span class="mdc-list-item__secondary-text">On off switches</span>
|
|
</span>
|
|
</a>
|
|
<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</span>
|
|
</span>
|
|
</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">
|
|
Text field
|
|
<span class="mdc-list-item__secondary-text">Single and multiline text fields</span>
|
|
</span>
|
|
</a> -->
|
|
<a role="listitem" class="mdc-list-item" href="top-app-bar.html">
|
|
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
|
|
<span class="mdc-list-item__text">
|
|
Top App Bar
|
|
<span class="mdc-list-item__secondary-text">Single and multiline text fields</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('demo-view', DemoView);
|
|
</script>
|
|
</body>
|
|
</html>
|