278 lines
16 KiB
HTML
278 lines
16 KiB
HTML
<!--
|
|
@license
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
|
|
<title>paper-dialog</title>
|
|
|
|
<script src="../webcomponentsjs/webcomponents.js"></script>
|
|
|
|
<link href="../font-roboto/roboto.html" rel="import">
|
|
<link href="../paper-button/paper-button.html" rel="import">
|
|
|
|
<link href="paper-dialog.html" rel="import">
|
|
<link href="paper-action-dialog.html" rel="import">
|
|
|
|
<style shim-shadowdom>
|
|
body {
|
|
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
|
font-size: 14px;
|
|
margin: 0;
|
|
padding: 24px;
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
section {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
section > div {
|
|
padding: 14px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
button {
|
|
margin: 8px 4px;
|
|
}
|
|
|
|
html /deep/ [autofocus] {
|
|
color: #03a9f4;
|
|
}
|
|
|
|
html /deep/ .scrolling::shadow #scroller {
|
|
height: 350px;
|
|
}
|
|
|
|
html /deep/ .colored {
|
|
border: 1px solid #0f9d58;
|
|
background-color: #b7e1cd;
|
|
color: #0f9d58;
|
|
}
|
|
|
|
html /deep/ .size-position {
|
|
position: fixed;
|
|
top: 16px;
|
|
right: 16px;
|
|
}
|
|
|
|
html /deep/ .size-position::shadow #scroller {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<!--
|
|
<style>
|
|
body {
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
|
font-size: 16px;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
}
|
|
|
|
paper-dialog {
|
|
width: 50%;
|
|
min-width: 430px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
paper-dialog paper-button {
|
|
font-weight: bold;
|
|
}
|
|
|
|
paper-button[autofocus] {
|
|
color: #4285f4;
|
|
}
|
|
</style>
|
|
-->
|
|
</head>
|
|
<body unresolved>
|
|
|
|
<template is="auto-binding">
|
|
|
|
<section on-tap="{{toggleDialog1}}">
|
|
|
|
<div>Dialog Layouts</div>
|
|
|
|
<button>
|
|
Plain dialog
|
|
</button>
|
|
|
|
<paper-dialog>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</paper-dialog>
|
|
|
|
<button>
|
|
Dialog with heading
|
|
</button>
|
|
|
|
<paper-dialog heading="Title">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</paper-dialog>
|
|
|
|
<button>
|
|
Dialog with actions
|
|
</button>
|
|
|
|
<paper-action-dialog heading="Title">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
|
|
<paper-button dismissive>More Info...</paper-button>
|
|
<paper-button affirmative>Decline</paper-button>
|
|
<paper-button affirmative autofocus>Accept</paper-button>
|
|
</paper-action-dialog>
|
|
|
|
<button>
|
|
Modal dialog with backdrop and actions
|
|
</button>
|
|
|
|
<paper-action-dialog backdrop autoCloseDisabled layered="false">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
|
|
<paper-button affirmative autofocus>Tap me to close</paper-button>
|
|
</paper-action-dialog>
|
|
|
|
</section>
|
|
|
|
<section on-tap="{{toggleDialog1}}">
|
|
|
|
<div>Scrolling</div>
|
|
|
|
<button>
|
|
Dialog with heading
|
|
</button>
|
|
|
|
<paper-dialog heading="Title" class="scrolling">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</paper-dialog>
|
|
|
|
<button>
|
|
Dialog with actions
|
|
</button>
|
|
|
|
<paper-action-dialog heading="Title" class="scrolling">
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
<paper-button dismissive>More Info...</paper-button>
|
|
<paper-button affirmative>Decline</paper-button>
|
|
<paper-button affirmative autofocus>Accept</paper-button>
|
|
|
|
</paper-action-dialog>
|
|
|
|
</section>
|
|
|
|
<section on-tap="{{toggleDialog2}}">
|
|
|
|
<div>Transitions</div>
|
|
|
|
<template repeat="{{transitions}}">
|
|
<button transition="{{}}">{{}}</button>
|
|
</template>
|
|
|
|
<paper-dialog id="dialog2" transition="{{transition}}">
|
|
|
|
<h1>{{transition || 'No Transition'}}</h1>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
|
|
</paper-dialog>
|
|
|
|
</section>
|
|
|
|
<section on-tap="{{toggleDialog1}}">
|
|
|
|
<div>Custom Styling</div>
|
|
|
|
<button>
|
|
Colors
|
|
</button>
|
|
|
|
<paper-dialog heading="Custom Colors" class="colored">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</paper-dialog>
|
|
|
|
<button>
|
|
Size & Position
|
|
</button>
|
|
|
|
<paper-dialog heading="Custom Size & Position" class="size-position">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</paper-dialog>
|
|
|
|
</section>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
|
|
var scope = document.querySelector('template[is=auto-binding]');
|
|
|
|
scope.toggleDialog1 = function(e) {
|
|
if (e.target.localName != 'button') {
|
|
return;
|
|
}
|
|
var d = e.target.nextElementSibling;
|
|
if (!d) {
|
|
return;
|
|
}
|
|
d.toggle();
|
|
};
|
|
|
|
scope.transitions = [
|
|
'core-transition-center',
|
|
'core-transition-top',
|
|
'core-transition-bottom',
|
|
'core-transition-left',
|
|
'core-transition-right'
|
|
];
|
|
|
|
scope.toggleDialog2 = function(e) {
|
|
if (e.target.localName != 'button') {
|
|
return;
|
|
}
|
|
scope.transition = e.target.getAttribute('transition');
|
|
document.getElementById('dialog2').toggle();
|
|
};
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|