101 lines
2.6 KiB
HTML
101 lines
2.6 KiB
HTML
<!--
|
|
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
|
|
-->
|
|
|
|
<!--
|
|
|
|
Material Design: <a href="http://www.google.com/design/spec/components/dialogs.html">Dialogs</a>
|
|
|
|
`paper-dialog` is an overlay with a drop shadow.
|
|
|
|
Example:
|
|
|
|
<paper-dialog heading="Dialog Title">
|
|
<p>Some content</p>
|
|
</paper-dialog>
|
|
|
|
Styling
|
|
-------
|
|
|
|
Because a `paper-dialog` is `layered` by default, you need to use the `/deep/`
|
|
combinator to style all instances of the `paper-dialog`. Style the position,
|
|
colors and other inherited properties of the dialog using the
|
|
`html /deep/ paper-dialog` selector. Use the `html /deep/ paper-dialog::shadow #scroller` selector to size the dialog. Note that if you provided actions, the height
|
|
of the actions will be added to the height of the dialog.
|
|
|
|
html /deep/ paper-dialog {
|
|
color: green;
|
|
}
|
|
|
|
html /deep/ paper-dialog::shadow #scroller {
|
|
height: 300px;
|
|
width: 300px;
|
|
}
|
|
|
|
Transitions
|
|
-----------
|
|
|
|
You can use transitions provided by `core-transition` with this element.
|
|
|
|
<paper-dialog transition="core-transition-center">
|
|
<p>Some content</p>
|
|
</paper-dialog>
|
|
|
|
Accessibility
|
|
-------------
|
|
|
|
By default, the `aria-label` will be set to the value of the `heading` attribute.
|
|
|
|
@group Paper Elements
|
|
@element paper-dialog
|
|
@extends paper-dialog-base
|
|
@homepage github.io
|
|
@status unstable
|
|
-->
|
|
<link href="../polymer/polymer.html" rel="import">
|
|
<link href="../paper-shadow/paper-shadow.html" rel="import">
|
|
|
|
<link href="paper-dialog-base.html" rel="import">
|
|
|
|
<polymer-element name="paper-dialog" extends="paper-dialog-base" role="dialog" layout vertical noscript>
|
|
|
|
<template>
|
|
|
|
<style>
|
|
:host {
|
|
background: #fff;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
margin: 32px;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
#scroller {
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
padding: 24px;
|
|
}
|
|
</style>
|
|
|
|
<paper-shadow z="3" fit></paper-shadow>
|
|
|
|
<!-- need this because the host needs to be overflow: visible -->
|
|
<div id="scroller" relative flex auto>
|
|
<template if="{{heading}}">
|
|
<h1>{{heading}}</h1>
|
|
</template>
|
|
|
|
<content></content>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</polymer-element>
|