material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-27 22:17:25 +03:00
Code Issues Projects Releases Wiki Activity
b2624f028d
material-web/demos/dialog.html
Elliott Marquez c1030175a0
remove es6 from demos (#713)
2019-12-19 16:49:43 -08:00

186 lines
11 KiB
HTML
Raw Blame History

<!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>dialog demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
<script type="module" src="../node_modules/@material/mwc-textfield/mwc-textfield.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>
<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>
body {
min-height: calc(100vh - 4em);
}
</style>
</head>
<body class="unresolved">
<header>
<a href="index.html"><mwc-icon>arrow_back</mwc-icon>
<span>Dialog</span></a>
</header>
<main>
<div>
<mwc-button data-num="1" raised>Basic</mwc-button>
<mwc-dialog id="dialog1" heading="Dialog header">
Dialog body text
<mwc-button slot="primaryAction" dialogAction="ok">Action 2</mwc-button>
<mwc-button slot="secondaryAction" dialogAction="cancel">Action 1</mwc-button>
</mwc-dialog>
<mwc-button data-num="2" raised>Actions</mwc-button>
<mwc-dialog id="dialog2" heading="Actions">
<p>
By setting the dialogAction="my-action" attribute on any element projected into
mwc-dialog, you can close the dialog by clicking on that element. The
dialog will then fire a non-bubbling "closing" event and a non-bubbling
"closed" event with an event detail of {action: "my-action"}
</p>
<mwc-button slot="primaryAction" dialogAction="customAction">This has action</mwc-button>
<mwc-button slot="secondaryAction">this does not</mwc-button>
</mwc-dialog>
<mwc-button data-num="3" raised>Scrollable</mwc-button>
<mwc-dialog id="dialog3" heading="My Title">
<p>
Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
</p>
<mwc-button slot="primaryAction" dialogAction="close">Close this!</mwc-button>
</mwc-dialog>
<mwc-button data-num="4" raised>Hide Actions</mwc-button>
<mwc-dialog id="dialog4" heading="Hide Actions">
<p>
If you don't have actions, you may want to set the "hideActions" property.
This property will remove extra whitespace at the bottom of this dialog.
This button will toggle that whitespace:
</p>
<mwc-button raised id="toggleActions">Toggle hideActions</mwc-button>
<div>
mwc-dialog.hideActions is currently:
<span id="hideActionVal">
false
</span>
</div>
</mwc-dialog>
<style>
.styled {
--mdc-theme-surface: #FFF;
--mdc-dialog-scrim-color: rgba(35, 47, 52, .32);
--mdc-dialog-heading-ink-color: #232F34;
--mdc-dialog-content-ink-color: #232F34;
--mdc-dialog-scroll-divider-color: transparent;
--mdc-dialog-min-width: 500px;
--mdc-dialog-max-width: 700px;
--mdc-dialog-max-height: 350px;
--mdc-dialog-shape-radius: 0px;
/* color buttons */
--mdc-theme-primary: #344955;
}
</style>
<mwc-button data-num="5" raised>Styled</mwc-button>
<mwc-dialog id="dialog5" heading="Styled" class="styled">
<div>These are the current styles applied to this dialog</div>
<pre>
--mdc-theme-surface: #FFF;
--mdc-dialog-scrim-color: rgba(35, 47, 52, .32);
--mdc-dialog-heading-ink-color: #232F34;
--mdc-dialog-content-ink-color: #232F34;
--mdc-dialog-scroll-divider-color: transparent;
--mdc-dialog-min-width: 500px;
--mdc-dialog-max-width: 700px;
--mdc-dialog-max-height: 350px;
--mdc-dialog-shape-radius: 0px;
/* color buttons */
--mdc-theme-primary: #344955;
</pre>
<mwc-button slot="primaryAction" dialogAction="close">
Too stylish for me!
</mwc-button>
</mwc-dialog>
<mwc-button data-num="6" raised>Stacked</mwc-button>
<mwc-dialog id="dialog6" heading="Stacked" stacked>
<div>
This is what happens when you set the stacked property on mwc-dialog.
Notice that the primary action is now on top.
</div>
<mwc-button slot="primaryAction" dialogAction="close">
Primary
</mwc-button>
<mwc-button slot="secondaryAction" dialogAction="close">
Secondary
</mwc-button>
</mwc-dialog>
<mwc-button data-num="7" raised>Initial Focus</mwc-button>
<mwc-dialog id="dialog7" heading="Initial Focus">
<div>
In this example we set "dialogInitialFocus" on the mwc-textfield.
When this dialog opens, it is auto-focused.
</div>
<mwc-textfield
label="i am auto-focused"
dialogInitialFocus>
</mwc-textfield>
<mwc-button slot="primaryAction" dialogAction="close">
Primary
</mwc-button>
<mwc-button slot="secondaryAction" dialogAction="close">
Secondary
</mwc-button>
</mwc-dialog>
<script>
addEventListener('load', function() { document.body.classList.remove('unresolved'); });
var buttons = document.body.querySelectorAll('mwc-button[data-num]');
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
var buttonNum = button.dataset.num;
button.addEventListener('click', function() {
var dialog = document.body.querySelector('#dialog' + buttonNum);
dialog.open = true;
});
}
toggleActions.onclick = function() {
var dialog = document.body.querySelector('#dialog4');
var hideActionSpan = document.body.querySelector('#hideActionVal');
var hideAction = !dialog.hideActions;
dialog.hideActions = hideAction;
hideActionSpan.innerText = hideAction;
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink