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

   1 <!doctype html>
   2 <html>
   3 <head>
   4   <title>paper-tabs</title>
   5   <meta name="viewport" content="width=device-width; initial-scale=1.0; max-scale=1.0; user-scalable=yes">
   6   <script src="../platform/platform.js"></script>
   7
   8   <link rel="import" href="../core-icons/core-icons.html">
   9   <link rel="import" href="paper-tabs.html">
  10   <link rel="import" href="../core-toolbar/core-toolbar.html">
  11   <link rel="import" href="../paper-icon-button/paper-icon-button.html">
  12   <link rel="import" href="../font-roboto/roboto.html">
  13
  14   <style shim-shadowdom>
  15
  16     body {
  17       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  18       margin: 0;
  19       padding: 24px;
  20       color: #333;
  21       -webkit-user-select: none;
  22       -moz-user-select: none;
  23       -ms-user-select: none;
  24       user-select: none;
  25       -webkit-tap-highlight-color: rgba(0,0,0,0);
  26       -webkit-touch-callout: none;
  27     }
  28
  29     paper-tabs, core-toolbar {
  30       background-color: #00bcd4;
  31       color: #fff;
  32       box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
  33     }
  34
  35     core-toolbar paper-tabs {
  36       box-shadow: none;
  37     }
  38
  39     paper-tabs[noink][nobar] paper-tab.core-selected {
  40       color: #ffff8d;
  41     }
  42
  43     paper-tabs.transparent-teal {
  44       background-color: transparent;
  45       color: #00bcd4;
  46       box-shadow: none;
  47     }
  48
  49     paper-tabs.transparent-teal::shadow #selectionBar {
  50       background-color: #00bcd4;
  51     }
  52
  53     paper-tabs.transparent-teal paper-tab::shadow #ink {
  54       color: #00bcd4;
  55     }
  56
  57     h3 {
  58       font-size: 16px;
  59       font-weight: 400;
  60     }
  61
  62   </style>
  63
  64 </head>
  65 <body unresolved>
  66
  67   <h3>A. No ink effect and no sliding bar</h3>
  68
  69   <paper-tabs selected="0" noink nobar>
  70
  71     <paper-tab>ITEM ONE</paper-tab>
  72     <paper-tab>ITEM TWO</paper-tab>
  73     <paper-tab>ITEM THREE</paper-tab>
  74
  75   </paper-tabs>
  76
  77   <br>
  78   <br>
  79
  80   <h3>B. The bar slides to the selected tab</h3>
  81
  82   <paper-tabs selected="0" noink>
  83
  84     <paper-tab>ITEM ONE</paper-tab>
  85     <paper-tab>ITEM TWO</paper-tab>
  86     <paper-tab>ITEM THREE</paper-tab>
  87
  88   </paper-tabs>
  89
  90   <br>
  91   <br>
  92
  93   <h3>C. Inky Tabs</h3>
  94
  95   <paper-tabs selected="0">
  96
  97     <paper-tab>ITEM ONE</paper-tab>
  98     <paper-tab>ITEM TWO</paper-tab>
  99     <paper-tab>ITEM THREE</paper-tab>
 100
 101   </paper-tabs>
 102
 103   <br>
 104   <br>
 105
 106   <paper-tabs selected="0" class="transparent-teal">
 107
 108     <paper-tab>ITEM ONE</paper-tab>
 109     <paper-tab>ITEM TWO</paper-tab>
 110     <paper-tab>ITEM THREE</paper-tab>
 111
 112   </paper-tabs>
 113
 114   <br>
 115   <br>
 116
 117   <core-toolbar class="medium-tall">
 118
 119     <paper-icon-button icon="menu"></paper-icon-button>
 120     <div flex>Title</div>
 121     <paper-icon-button icon="search"></paper-icon-button>
 122     <paper-icon-button icon="more-vert"></paper-icon-button>
 123
 124     <div class="bottom fit" horizontal layout>
 125
 126       <paper-tabs selected="0" flex style="max-width: 600px;">
 127
 128         <paper-tab>ITEM ONE</paper-tab>
 129         <paper-tab>ITEM TWO</paper-tab>
 130         <paper-tab>ITEM THREE</paper-tab>
 131
 132       </paper-tabs>
 133
 134     </div>
 135
 136   </core-toolbar>
 137
 138   <br>
 139   <br>
 140
 141   <core-toolbar class="tall">
 142
 143     <paper-tabs selected="0" class="bottom indent" style="width: 200px;" self-end>
 144
 145       <paper-tab>ITEM ONE</paper-tab>
 146       <paper-tab>ITEM TWO</paper-tab>
 147
 148     </paper-tabs>
 149
 150     <div class="bottom" flex></div>
 151
 152     <paper-icon-button class="bottom" icon="search"></paper-icon-button>
 153
 154   </core-toolbar>
 155
 156 </body>
 157 </html>