| Index: third_party/polymer/components/core-animated-pages/demos/simple.html
|
| diff --git a/third_party/polymer/components/core-animated-pages/demos/simple.html b/third_party/polymer/components/core-animated-pages/demos/simple.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..a28846e579875197d1cec563a299350346275c05
|
| --- /dev/null
|
| +++ b/third_party/polymer/components/core-animated-pages/demos/simple.html
|
| @@ -0,0 +1,89 @@
|
| +<!doctype html>
|
| +<html>
|
| +<head>
|
| +
|
| + <script src="../../platform/platform.js"></script>
|
| + <link href="../core-animated-pages.html" rel="import">
|
| + <link href="../transitions/cross-fade.html" rel="import">
|
| + <link href="../transitions/slide-from-right.html" rel="import">
|
| +
|
| + <style>
|
| + body {
|
| + font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
| + margin: 0;
|
| + }
|
| +
|
| + core-animated-pages {
|
| + position: absolute;
|
| + top: 50px;
|
| + right: 0;
|
| + bottom: 0;
|
| + left: 0;
|
| + font-size: 72px;
|
| + overflow: hidden;
|
| + }
|
| +
|
| + section > div {
|
| + height: 100%;
|
| + color: white;
|
| + }
|
| +
|
| + </style>
|
| +
|
| +</head>
|
| +<body unresolved>
|
| + <select onchange="change();">
|
| + <option value="cross-fade-all" selected>cross-fade-all</option>
|
| + <option value="slide-from-right">slide-from-right</option>
|
| + </select>
|
| +
|
| + <core-animated-pages onclick="stuff();" transitions="cross-fade-all">
|
| + <section>
|
| + <div layout vertical center center-justified style="background:red;">
|
| + <div>1</div>
|
| + </div>
|
| + </section>
|
| + <section>
|
| + <div layout vertical center center-justified style="background:blue;">
|
| + <div>2</div>
|
| + </div>
|
| + </section>
|
| + <section>
|
| + <div layout vertical center center-justified style="background:purple;">
|
| + <div>3</div>
|
| + </div>
|
| + </section>
|
| + <section>
|
| + <div layout vertical center center-justified style="background:orange;">
|
| + <div>4</div>
|
| + </div>
|
| + </section>
|
| + <section>
|
| + <div layout vertical center center-justified style="background:green;">
|
| + <div>5</div>
|
| + </div>
|
| + </section>
|
| + </core-animated-pages>
|
| +
|
| + <script>
|
| + function change() {
|
| + var s = document.querySelector('select');
|
| + document.querySelector('core-animated-pages').transitions = document.querySelector('select').options[s.selectedIndex].value;
|
| + }
|
| +
|
| + var up = true;
|
| + var max = 4;
|
| + function stuff() {
|
| + var p = document.querySelector('core-animated-pages');
|
| + if (up && p.selected === max || !up && p.selected === 0) {
|
| + up = !up;
|
| + }
|
| + if (up) {
|
| + p.selected += 1;
|
| + } else {
|
| + p.selected -= 1;
|
| + }
|
| + }
|
| + </script>
|
| +</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