mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 22:17:25 +03:00
186 lines
11 KiB
HTML
186 lines
11 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>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>
|