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> 158
