third_party/polymer/v1_0/components-chromium/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 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
  11 <link rel="import" href="../iron-selector/iron-selectable.html">
  12
  13 <!--
  14 `iron-pages` is used to select one of its children to show. One use is to cycle through a list of
  15 children "pages".
  16
  17 Example:
  18
  19     <iron-pages selected="0">
  20       <div>One</div>
  21       <div>Two</div>
  22       <div>Three</div>
  23     </iron-pages>
  24
  25     <script>
  26       document.addEventListener('click', function(e) {
  27         var pages = document.querySelector('iron-pages');
  28         pages.selectNext();
  29       });
  30     </script>
  31
  32 @group Iron Elements
  33 @class iron-pages
  34 @hero hero.svg
  35 @demo demo/index.html
  36 @extends iron-selector
  37 -->
  38
  39 </head><body><dom-module id="iron-pages">
  40
  41   <style>
  42
  43     :host {
  44       display: block;
  45     }
  46
  47     :host > ::content > :not(.iron-selected) {
  48       display: none !important;
  49     }
  50
  51   </style>
  52
  53   <template>
  54
  55     <content></content>
  56
  57   </template>
  58
  59 </dom-module>
  60
  61 <script src="iron-pages-extracted.js"></script></body></html>