mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 14:07:17 +03:00
118 lines
3.8 KiB
HTML
118 lines
3.8 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>card demo</title>
|
|
<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;
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.presentCard {
|
|
padding: 40px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.content {
|
|
padding: 8px;
|
|
background-color: tomato;
|
|
}
|
|
|
|
.rounded {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body class="unresolved">
|
|
<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 '../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() {
|
|
return html`
|
|
${cardStyle}${typographyStyle}
|
|
<style>
|
|
:host {
|
|
display: inline-block;
|
|
}
|
|
|
|
.mdc-card {
|
|
max-width: 350px;
|
|
}
|
|
|
|
.my-media {
|
|
background-image: url('https://material-components-web.appspot.com/images/16-9.jpg');
|
|
}
|
|
|
|
.content {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.subtext {
|
|
color: rgba(0, 0, 0, 0.54);
|
|
}
|
|
</style>
|
|
<div class="mdc-card">
|
|
<div class="mdc-card__primary-action">
|
|
<div class="mdc-card__media mdc-card__media--16-9 my-media"></div>
|
|
<div class="content">
|
|
<h2 class="mdc-typography--title">Our Changing Planet</h2>
|
|
<h3 class="mdc-typography--subheading1 subtext">by Kurt Wagner</h3>
|
|
<div class="mdc-typography--body1 subtext">Visit ten places on our planet that are undergoing the biggest changes today.</div>
|
|
</div>
|
|
<mdc-ripple></mdc-ripple>
|
|
</div>
|
|
<!-- ... content ... -->
|
|
<div class="mdc-card__actions">
|
|
<div class="mdc-card__action-buttons">
|
|
<mwc-button dense class="mdc-card__action--button">Read</mwc-button>
|
|
<mwc-button dense class="mdc-card__action--button">Save</mwc-button>
|
|
</div>
|
|
<div class="mdc-card__action-icons">
|
|
<mwc-icon-toggle title="Share" icon="share"></mwc-icon-toggle>
|
|
<mwc-icon-toggle title="More options" icon="more_vert"></mwc-icon-toggle>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('demo-card', DemoCard);
|
|
</script>
|
|
<div class="presentCard">
|
|
<demo-card></demo-card>
|
|
</div>
|
|
<script>
|
|
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
|
</script>
|
|
</body>
|
|
</html>
|