third_party/polymer/v1_0/components/iron-pages/iron-pages.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10
  11 <link rel="import" href="../polymer/polymer.html">
  12 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
  13 <link rel="import" href="../iron-selector/iron-selectable.html">
  14
  15 <!--
  16 `iron-pages` is used to select one of its children to show. One use is to cycle through a list of
  17 children "pages".
  18
  19 Example:
  20
  21     <iron-pages selected="0">
  22       <div>One</div>
  23       <div>Two</div>
  24       <div>Three</div>
  25     </iron-pages>
  26
  27     <script>
  28       document.addEventListener('click', function(e) {
  29         var pages = document.querySelector('iron-pages');
  30         pages.selectNext();
  31       });
  32     </script>
  33
  34 @group Iron Elements
  35 @class iron-pages
  36 @hero hero.svg
  37 @demo demo/index.html
  38 @extends iron-selector
  39 -->
  40
  41 <dom-module id="iron-pages">
  42
  43   <style>
  44
  45     :host {
  46       display: block;
  47     }
  48
  49     :host > ::content > :not(.iron-selected) {
  50       display: none !important;
  51     }
  52
  53   </style>
  54
  55   <template>
  56
  57     <content></content>
  58
  59   </template>
  60
  61 </dom-module>
  62
  63 <script>
  64
  65   Polymer({
  66
  67     is: 'iron-pages',
  68
  69     behaviors: [
  70       Polymer.IronResizableBehavior,
  71       Polymer.IronSelectableBehavior
  72     ],
  73
  74     properties: {
  75
  76       // as the selected page is the only one visible, activateEvent
  77       // is both non-sensical and problematic; e.g. in cases where a user
  78       // handler attempts to change the page and the activateEvent
  79       // handler immediately changes it back
  80       activateEvent: {
  81         value: null
  82       }
  83
  84     },
  85
  86     observers: [
  87       '_selectedPageChanged(selected)'
  88     ],
  89
  90     _selectedPageChanged: function(selected, old) {
  91       this.async(this.notifyResize);
  92     }
  93   });
  94
  95 </script>