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>
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">
14 <style shim-shadowdom>
17 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
21 -webkit-user-select: none;
22 -moz-user-select: none;
23 -ms-user-select: none;
25 -webkit-tap-highlight-color: rgba(0,0,0,0);
26 -webkit-touch-callout: none;
29 paper-tabs, core-toolbar {
30 background-color: #00bcd4;
32 box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
35 core-toolbar paper-tabs {
39 paper-tabs[noink][nobar] paper-tab.core-selected {
43 paper-tabs.transparent-teal {
44 background-color: transparent;
49 paper-tabs.transparent-teal::shadow #selectionBar {
50 background-color: #00bcd4;
53 paper-tabs.transparent-teal paper-tab::shadow #ink {
67 <h3>A. No ink effect and no sliding bar</h3>
69 <paper-tabs selected="0" noink nobar>
71 <paper-tab>ITEM ONE</paper-tab>
72 <paper-tab>ITEM TWO</paper-tab>
73 <paper-tab>ITEM THREE</paper-tab>
80 <h3>B. The bar slides to the selected tab</h3>
82 <paper-tabs selected="0" noink>
84 <paper-tab>ITEM ONE</paper-tab>
85 <paper-tab>ITEM TWO</paper-tab>
86 <paper-tab>ITEM THREE</paper-tab>
95 <paper-tabs selected="0">
97 <paper-tab>ITEM ONE</paper-tab>
98 <paper-tab>ITEM TWO</paper-tab>
99 <paper-tab>ITEM THREE</paper-tab>
106 <paper-tabs selected="0" class="transparent-teal">
108 <paper-tab>ITEM ONE</paper-tab>
109 <paper-tab>ITEM TWO</paper-tab>
110 <paper-tab>ITEM THREE</paper-tab>
117 <core-toolbar class="medium-tall">
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>
124 <div class="bottom fit" horizontal layout>
126 <paper-tabs selected="0" flex style="max-width: 600px;">
128 <paper-tab>ITEM ONE</paper-tab>
129 <paper-tab>ITEM TWO</paper-tab>
130 <paper-tab>ITEM THREE</paper-tab>
141 <core-toolbar class="tall">
143 <paper-tabs selected="0" class="bottom indent" style="width: 200px;" self-end>
145 <paper-tab>ITEM ONE</paper-tab>
146 <paper-tab>ITEM TWO</paper-tab>
150 <div class="bottom" flex></div>
152 <paper-icon-button class="bottom" icon="search"></paper-icon-button>