third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html

   1 <link href="../../core-icons/core-icons.html" rel="import">
   2 <link href="../../core-icon-button/core-icon-button.html" rel="import">
   3 <link href="../core-animated-pages.html" rel="import">
   4
   5 <polymer-element name="nested-animated-pages">
   6 <template>
   7   <style>
   8     :host {
   9       display: block;
  10       position: relative;
  11     }
  12
  13     core-animated-pages {
  14       position: absolute;
  15       top: 0;
  16       left: 0;
  17       right: 0;
  18       bottom: 0;
  19     }
  20
  21     .tall-toolbar {
  22       box-sizing: border-box;
  23       height: 240px;
  24     }
  25
  26     .tall-toolbar.colored {
  27       fill: #fff;
  28       color: #fff;
  29     }
  30
  31     .tall-toolbar [flex] {
  32       font-size: 1.5em;
  33     }
  34
  35     core-icon-button {
  36       margin: 16px;
  37     }
  38
  39     .body {
  40       background-color: #f1f1f1;
  41     }
  42
  43     .square {
  44       position: absolute;
  45       width: 150px;
  46       height: 150px;
  47       left: 16px;
  48       top: 175px;
  49     }
  50
  51   </style>
  52   <core-animated-pages id="pages" selected="{{page}}" selectedItem="{{selectedItem}}" transitions="hero-transition" no-transition?="{{noTransition}}">
  53
  54     <section id="page1" cross-fade>
  55       <div class="tall-toolbar colored" style="background-color:orange;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}">
  56         <div layout horizontal center>
  57           <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
  58           <div flex>One</div>
  59           <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
  60         </div>
  61         <div flex></div>
  62       </div>
  63       <div flex class="body"></div>
  64     </section>
  65
  66     <section layout vertical id="page2" cross-fade>
  67       <div class="tall-toolbar" layout vertical>
  68         <div layout horizontal center>
  69           <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
  70           <div flex>Two</div>
  71           <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
  72         </div>
  73         <div flex></div>
  74       </div>
  75       <div flex class="body"></div>
  76       <div class="square" style="background-color:orange;" hero-id="thing" hero?="{{page === 1 || !noTransition}}"></div>
  77     </section>
  78
  79   </core-animated-pages>
  80 </template>
  81 <script>
  82
  83   Polymer({
  84
  85     publish: {
  86       page: {value: 0}
  87     },
  88
  89     selectedItem: null,
  90     noTransition: true,
  91
  92     back: function() {
  93       this.noTransition = true;
  94       this.fire('nested-back');
  95     },
  96
  97     transition: function() {
  98       this.noTransition = false;
  99       this.page = this.page === 0 ? 1 : 0;
 100     }
 101
 102   });
 103 </script>
 104 </polymer-element>