third_party/polymer/components/core-pages/core-pages.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11 `core-pages` is used to select one of its children to show. One use is to cycle through a list of children "pages".
  12
  13 Example:
  14
  15     <core-pages selected="0">
  16       <div>One</div>
  17       <div>Two</div>
  18       <div>Three</div>
  19     </core-pages>
  20
  21     <script>
  22       document.addEventListener('click', function(e) {
  23         var pages = document.querySelector('core-pages');
  24         pages.selected = (pages.selected + 1) % pages.children.length;
  25       });
  26     </script>
  27
  28 @group Polymer Core Elements
  29 @class core-pages
  30 @extends core-selector
  31 -->
  32
  33 <link rel="import" href="../polymer/polymer.html">
  34 <link rel="import" href="../core-selector/core-selector.html">
  35
  36 <polymer-element name="core-pages" extends="core-selector" selected="0" notap noscript>
  37 <template>
  38
  39   <link rel="stylesheet" href="core-pages.css">
  40
  41   <shadow></shadow>
  42
  43 </template>
  44 </polymer-element>