paper-dialog.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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->

<!--


Example:

@group Paper Elements
@element paper-dialog
@homepage github.io

-->
<link href="../polymer/polymer.html" rel="import">
<link href="../core-overlay/core-overlay.html" rel="import">
<link href="../paper-shadow/paper-shadow.html" rel="import">

<polymer-element name="paper-dialog" attributes="opened heading transition">

  <template>

    <link href="paper-dialog.css" rel="stylesheet">

    <div id="shadow">
      <paper-shadow z="3" hasPosition></paper-shadow>
    </div>

    <core-overlay id="overlay" opened="{{opened}}" target="{{}}" sizingTarget="{{$.container}}" closeSelector="[dismissive],[affirmative]" transition="{{transition}}" margin="20"></core-overlay>

    <div id="container" layout vertical>

      <div id="actions" layout horizontal>
        <content select="[dismissive]"></content>
        <div flex auto></div>
        <content select="[affirmative]"></content>
      </div>

      <div id="main" flex auto>
        <h1>{{heading}}</h1>
        <content></content>
      </div>

    </div>

  </template>

  <script>

    Polymer('paper-dialog', {

      /**
       * Set opened to true to show the dialog and to false to hide it.
       * A dialog may be made intially opened by setting its opened attribute.

       * @attribute opened
       * @type boolean
       * @default false
       */
      opened: false,

      /**
       * @attribute heading
       * @type string
       * @default ''
       */
      heading: '',

      /**
       * Set this property to the id of a <core-transition> element to specify
       * the transition to use when opening/closing this dialog.
       *
       * @attribute transition
       * @type string
       * @default ''
       */
      transition: '',

      /** 
       * Toggle the dialog's opened state.
       * @method toggle
       */
      toggle: function() {
        this.$.overlay.toggle();
      }

    });

  </script>

</polymer-element>