• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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
17children "pages".
18
19Example:
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@hero hero.svg
36@demo demo/index.html
37-->
38
39<dom-module id="iron-pages">
40
41  <template>
42    <style>
43      :host {
44        display: block;
45      }
46
47      :host > ::content > :not(.iron-selected) {
48        display: none !important;
49      }
50    </style>
51
52    <content></content>
53  </template>
54
55  <script>
56    Polymer({
57
58      is: 'iron-pages',
59
60      behaviors: [
61        Polymer.IronResizableBehavior,
62        Polymer.IronSelectableBehavior
63      ],
64
65      properties: {
66
67        // as the selected page is the only one visible, activateEvent
68        // is both non-sensical and problematic; e.g. in cases where a user
69        // handler attempts to change the page and the activateEvent
70        // handler immediately changes it back
71        activateEvent: {
72          type: String,
73          value: null
74        }
75
76      },
77
78      observers: [
79        '_selectedPageChanged(selected)'
80      ],
81
82      _selectedPageChanged: function(selected, old) {
83        this.async(this.notifyResize);
84      }
85    });
86
87  </script>
88</dom-module>
89