Index: third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html |
diff --git a/third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html b/third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..afe3c3f7b1e307fd5f03670be4dc9b9792102965 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html |
@@ -0,0 +1,104 @@ |
+<link href="../../core-icons/core-icons.html" rel="import"> |
+<link href="../../core-icon-button/core-icon-button.html" rel="import"> |
+<link href="../core-animated-pages.html" rel="import"> |
+ |
+<polymer-element name="nested-animated-pages"> |
+<template> |
+ <style> |
+ :host { |
+ display: block; |
+ position: relative; |
+ } |
+ |
+ core-animated-pages { |
+ position: absolute; |
+ top: 0; |
+ left: 0; |
+ right: 0; |
+ bottom: 0; |
+ } |
+ |
+ .tall-toolbar { |
+ box-sizing: border-box; |
+ height: 240px; |
+ } |
+ |
+ .tall-toolbar.colored { |
+ fill: #fff; |
+ color: #fff; |
+ } |
+ |
+ .tall-toolbar [flex] { |
+ font-size: 1.5em; |
+ } |
+ |
+ core-icon-button { |
+ margin: 16px; |
+ } |
+ |
+ .body { |
+ background-color: #f1f1f1; |
+ } |
+ |
+ .square { |
+ position: absolute; |
+ width: 150px; |
+ height: 150px; |
+ left: 16px; |
+ top: 175px; |
+ } |
+ |
+ </style> |
+ <core-animated-pages id="pages" selected="{{page}}" selectedItem="{{selectedItem}}" transitions="hero-transition" no-transition?="{{noTransition}}"> |
+ |
+ <section id="page1" cross-fade> |
+ <div class="tall-toolbar colored" style="background-color:orange;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}"> |
+ <div layout horizontal center> |
+ <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button> |
+ <div flex>One</div> |
+ <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button> |
+ </div> |
+ <div flex></div> |
+ </div> |
+ <div flex class="body"></div> |
+ </section> |
+ |
+ <section layout vertical id="page2" cross-fade> |
+ <div class="tall-toolbar" layout vertical> |
+ <div layout horizontal center> |
+ <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button> |
+ <div flex>Two</div> |
+ <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button> |
+ </div> |
+ <div flex></div> |
+ </div> |
+ <div flex class="body"></div> |
+ <div class="square" style="background-color:orange;" hero-id="thing" hero?="{{page === 1 || !noTransition}}"></div> |
+ </section> |
+ |
+ </core-animated-pages> |
+</template> |
+<script> |
+ |
+ Polymer({ |
+ |
+ publish: { |
+ page: {value: 0} |
+ }, |
+ |
+ selectedItem: null, |
+ noTransition: true, |
+ |
+ back: function() { |
+ this.noTransition = true; |
+ this.fire('nested-back'); |
+ }, |
+ |
+ transition: function() { |
+ this.noTransition = false; |
+ this.page = this.page === 0 ? 1 : 0; |
+ } |
+ |
+ }); |
+</script> |
+</polymer-element> |