| Index: third_party/polymer/components/core-animated-pages/demos/nested.html
|
| diff --git a/third_party/polymer/components/core-animated-pages/demos/nested.html b/third_party/polymer/components/core-animated-pages/demos/nested.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..6d08bd2301338012a5b19730b7927d0e0a77d2fc
|
| --- /dev/null
|
| +++ b/third_party/polymer/components/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>
|
|
|
Chromium Code Reviews
Issue 582873003:
Polymer elements added to third_party/polymer. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master