Index: third_party/polymer/components-chromium/core-animated-pages/demos/nested.html |
diff --git a/third_party/polymer/components-chromium/core-animated-pages/demos/nested.html b/third_party/polymer/components-chromium/core-animated-pages/demos/nested.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..6d08bd2301338012a5b19730b7927d0e0a77d2fc |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-animated-pages/demos/nested.html |
@@ -0,0 +1,103 @@ |
+<!doctype html> |
+<html> |
+<head> |
+ <title>core-animated-pages</title> |
+ <script src="../../platform/platform.js"></script> |
+ <link href="nested-animated-pages.html" rel="import"> |
+ |
+ <style> |
+ body { |
+ font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif; |
+ margin: 0; |
+ background: #f1f1f1; |
+ } |
+ |
+ nested-demo { |
+ display: block; |
+ position: absolute; |
+ top: 0; |
+ left: 0; |
+ bottom: 0; |
+ right: 0; |
+ } |
+ </style> |
+</head> |
+<body> |
+ |
+ <polymer-element name="nested-demo"> |
+ <template> |
+ |
+ <style> |
+ |
+ core-animated-pages { |
+ display: block; |
+ position: absolute; |
+ top: 0; |
+ left: 0; |
+ bottom: 0; |
+ right: 0; |
+ } |
+ |
+ section { |
+ text-align: center; |
+ padding-top: 250px; |
+ } |
+ |
+ .square { |
+ display: inline-block; |
+ margin: 8px; |
+ padding: 8px; |
+ width: 200px; |
+ height: 200px; |
+ background-color: orange; |
+ color: #fff; |
+ } |
+ </style> |
+ |
+ <core-animated-pages selected="{{page}}" transitions="hero-transition cross-fade"> |
+ |
+ <section on-tap="{{transition}}" layout horizontal center-justified> |
+ |
+ <div class="square" id="thing1" hero-id="thing" hero?="{{subpage === 0}}" cross-fade?="{{subpage !== 0}}">thing 1</div> |
+ <div class="square" id="thing2" hero-id="thing" hero?="{{subpage === 1}}" cross-fade?="{{subpage !== 1}}">thing 2</div> |
+ |
+ </section> |
+ |
+ <nested-animated-pages page="{{subpage}}" on-nested-back="{{back}}"></nested-animated-pages> |
+ |
+ </core-animated-pages> |
+ </template> |
+ <script> |
+ |
+ Polymer('nested-demo', { |
+ |
+ page: 0, |
+ subpage: 0, |
+ |
+ transition: function(e) { |
+ |
+ var el = e.target; |
+ if (el.id === "thing1") { |
+ this.subpage = 0; |
+ } else { |
+ this.subpage = 1; |
+ } |
+ |
+ setTimeout(function() { |
+ this.page = 1; |
+ }.bind(this), 200); |
+ }, |
+ |
+ back: function() { |
+ this.page = 0; |
+ } |
+ |
+ }); |
+ |
+ </script> |
+ </polymer-element> |
+ |
+ <nested-demo></nested-demo> |
+ |
+</body> |
+</html> |