1<!doctype html> 2<!-- 3@license 4Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8Code distributed by Google as part of the polymer project is also 9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10--> 11 12<html> 13<head> 14 15 <title>iron-pages demo</title> 16 17 <meta charset="utf-8"> 18 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 19 <meta name="mobile-web-app-capable" content="yes"> 20 <meta name="apple-mobile-web-app-capable" content="yes"> 21 22 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 23 <link rel="import" href="../../paper-styles/color.html"> 24 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 25 <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 26 <link rel="import" href="../iron-pages.html"> 27 28 <style is="custom-style" include="demo-pages-shared-styles"></style> 29</head> 30<body unresolved> 31 <div class="vertical-section-container centered"> 32 <h3>iron-pages shows only one of its children at a time.</h3> 33 <demo-snippet> 34 <template> 35 <style is="custom-style"> 36 iron-pages { 37 width: 100%; 38 height: 200px; 39 font-size: 50px; 40 color: white; 41 text-align: center; 42 } 43 iron-pages div { 44 width: 100%; 45 height: 100%; 46 padding: 80px 0; 47 } 48 iron-pages div:nth-child(1) { 49 background-color: var(--google-blue-500); 50 } 51 iron-pages div:nth-child(2) { 52 background-color: var(--google-red-500); 53 } 54 iron-pages div:nth-child(3) { 55 background-color: var(--google-green-500); 56 } 57 </style> 58 <p>Click on a page to advance to the next one.</p> 59 <iron-pages selected="0"> 60 <div>One</div> 61 <div>Two</div> 62 <div>Three</div> 63 </iron-pages> 64 <script> 65 var pages = document.querySelector('iron-pages'); 66 pages.addEventListener('click', function(e) { 67 pages.selectNext(); 68 }); 69 </script> 70 </template> 71 </demo-snippet> 72 </div> 73</body> 74</html> 75