<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html"> <link rel="import" href="../iron-selector/iron-selectable.html"> <!-- `iron-pages` is used to select one of its children to show. One use is to cycle through a list of children "pages". Example: <iron-pages selected="0"> <div>One</div> <div>Two</div> <div>Three</div> </iron-pages> <script> document.addEventListener('click', function(e) { var pages = document.querySelector('iron-pages'); pages.selectNext(); }); </script> @group Iron Elements @class iron-pages @hero hero.svg @demo demo/index.html @extends iron-selector --> <dom-module id="iron-pages"> <style> :host { display: block; } :host > ::content > :not(.iron-selected) { display: none !important; } </style> <template> <content></content> </template> </dom-module> <script> Polymer({ is: 'iron-pages', behaviors: [ Polymer.IronResizableBehavior, Polymer.IronSelectableBehavior ], properties: { // as the selected page is the only one visible, activateEvent // is both non-sensical and problematic; e.g. in cases where a user // handler attempts to change the page and the activateEvent // handler immediately changes it back activateEvent: { type: String, value: null } }, observers: [ '_selectedPageChanged(selected)' ], _selectedPageChanged: function(selected, old) { this.async(this.notifyResize); } }); </script>