third_party/polymer/components-chromium/paper-tabs/demo.html

   1 <!--
   2     @license
   3     Copyright (c) 2014 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 <!doctype html>
  11 <html>
  12 <head>
  13   <title>paper-tabs</title>
  14   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  15
  16   <script src="../webcomponentsjs/webcomponents.js"></script>
  17
  18   <link rel="import" href="../core-icons/core-icons.html">
  19   <link rel="import" href="../font-roboto/roboto.html">
  20   <link rel="import" href="paper-tabs.html">
  21   <link rel="import" href="../core-toolbar/core-toolbar.html">
  22   <link rel="import" href="../core-media-query/core-media-query.html">
  23   <link rel="import" href="../paper-icon-button/paper-icon-button.html">
  24
  25   <style shim-shadowdom>
  26
  27     body {
  28       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  29       margin: 0;
  30       padding: 24px;
  31       color: #333;
  32     }
  33
  34     body.core-narrow {
  35       padding: 8px;
  36     }
  37
  38     paper-tabs, core-toolbar {
  39       background-color: #00bcd4;
  40       color: #fff;
  41       box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
  42     }
  43
  44     core-toolbar paper-tabs {
  45       box-shadow: none;
  46     }
  47
  48     paper-tabs[noink][nobar] paper-tab.core-selected {
  49       color: #ffff8d;
  50     }
  51
  52     paper-tabs.transparent-teal {
  53       background-color: transparent;
  54       color: #00bcd4;
  55       box-shadow: none;
  56     }
  57
  58     paper-tabs.transparent-teal::shadow #selectionBar {
  59       background-color: #00bcd4;
  60     }
  61
  62     paper-tabs.transparent-teal paper-tab::shadow #ink {
  63       color: #00bcd4;
  64     }
  65
  66     h3 {
  67       font-size: 16px;
  68       font-weight: 400;
  69     }
  70
  71   </style>
  72
  73 </head>
  74 <body unresolved>
  75
  76   <h3>A. No ink effect and no sliding bar</h3>
  77
  78   <paper-tabs selected="0" noink nobar>
  79
  80     <paper-tab>ITEM ONE</paper-tab>
  81     <paper-tab>ITEM TWO</paper-tab>
  82     <paper-tab>ITEM THREE</paper-tab>
  83
  84   </paper-tabs>
  85
  86   <br>
  87   <br>
  88
  89   <h3>B. The bottom bar appears to indicate the selected tab, but without sliding effect.</h3>
  90
  91   <paper-tabs selected="0" noink noslide>
  92
  93     <paper-tab>ITEM ONE</paper-tab>
  94     <paper-tab>ITEM TWO</paper-tab>
  95     <paper-tab>ITEM THREE</paper-tab>
  96
  97   </paper-tabs>
  98
  99   <br>
 100   <br>
 101
 102   <h3>C. The bar slides to the selected tab</h3>
 103
 104   <paper-tabs selected="0" noink>
 105
 106     <paper-tab>ITEM ONE</paper-tab>
 107     <paper-tab>ITEM TWO</paper-tab>
 108     <paper-tab>ITEM THREE</paper-tab>
 109
 110   </paper-tabs>
 111
 112   <br>
 113   <br>
 114
 115   <h3>D. Inky Tabs</h3>
 116
 117   <paper-tabs selected="0">
 118
 119     <paper-tab>ITEM ONE</paper-tab>
 120     <paper-tab>ITEM TWO</paper-tab>
 121     <paper-tab>ITEM THREE</paper-tab>
 122
 123   </paper-tabs>
 124
 125   <br>
 126   <br>
 127
 128   <paper-tabs selected="0" class="transparent-teal">
 129
 130     <paper-tab>ITEM ONE</paper-tab>
 131     <paper-tab>ITEM TWO</paper-tab>
 132     <paper-tab>ITEM THREE</paper-tab>
 133
 134   </paper-tabs>
 135
 136   <br>
 137   <br>
 138
 139   <h3>E. Scrollable Tabs</h3>
 140
 141   <paper-tabs id="scrollableTabs" selected="0" scrollable>
 142
 143     <paper-tab>NUMBER ONE ITEM</paper-tab>
 144     <paper-tab>ITEM TWO</paper-tab>
 145     <paper-tab>THE THIRD ITEM</paper-tab>
 146     <paper-tab>THE ITEM FOUR</paper-tab>
 147     <paper-tab>FIFTH</paper-tab>
 148     <paper-tab>THE SIXTH TAB</paper-tab>
 149     <paper-tab>NUMBER SEVEN</paper-tab>
 150     <paper-tab>EIGHT</paper-tab>
 151     <paper-tab>NUMBER NINE</paper-tab>
 152     <paper-tab>THE TENTH</paper-tab>
 153     <paper-tab>THE ITEM ELEVEN</paper-tab>
 154     <paper-tab>TWELFTH ITEM</paper-tab>
 155
 156   </paper-tabs>
 157
 158   <br>
 159   <br>
 160
 161   <h3>F. Link Tabs</h3>
 162
 163   <paper-tabs selected="0" link>
 164
 165     <paper-tab><a href="#item1" horizontal center-center layout>ITEM ONE</a></paper-tab>
 166     <paper-tab><a href="#item2" horizontal center-center layout>ITEM TWO</a></paper-tab>
 167     <paper-tab><a href="#item3" horizontal center-center layout>ITEM THREE</a></paper-tab>
 168
 169   </paper-tabs>
 170
 171   <br>
 172   <br>
 173
 174   <h3>G. Tabs in Toolbar</h3>
 175
 176   <core-toolbar class="medium-tall">
 177
 178     <paper-icon-button icon="menu"></paper-icon-button>
 179     <div flex>Title</div>
 180     <paper-icon-button icon="search"></paper-icon-button>
 181     <paper-icon-button icon="more-vert"></paper-icon-button>
 182
 183     <div class="bottom fit" horizontal layout>
 184
 185       <paper-tabs selected="0" flex style="max-width: 600px;">
 186
 187         <paper-tab>ITEM ONE</paper-tab>
 188         <paper-tab>ITEM TWO</paper-tab>
 189         <paper-tab>ITEM THREE</paper-tab>
 190
 191       </paper-tabs>
 192
 193     </div>
 194
 195   </core-toolbar>
 196
 197   <br>
 198   <br>
 199
 200   <core-toolbar class="tall">
 201
 202     <paper-tabs selected="0" class="bottom" self-end style="width: 300px;">
 203
 204       <paper-tab>ITEM ONE</paper-tab>
 205       <paper-tab>ITEM TWO</paper-tab>
 206
 207     </paper-tabs>
 208
 209     <div class="bottom" flex></div>
 210
 211     <paper-icon-button class="bottom" icon="search"></paper-icon-button>
 212
 213   </core-toolbar>
 214
 215   <!-- detect when window is narrow -->
 216   <core-media-query id="mediaQuery" query="max-width: 640px"></core-media-query>
 217
 218   <script>
 219
 220     document.querySelector('#mediaQuery').addEventListener('core-media-change',
 221       function(e) {
 222         document.body.classList.toggle('core-narrow', e.detail.matches);
 223         document.querySelector('#scrollableTabs').updateBar();
 224       });
 225
 226   </script>
 227
 228 </body>
 229 </html>