third_party/polymer/components/paper-tabs/demo.html - Issue 1215543002: Remove Polymer 0.5.

Side by Side Diff: third_party/polymer/components/paper-tabs/demo.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: fix unit test Created 5 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

OLD	NEW
	(Empty)
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://polym er.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/CO NTRIBUTORS.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/P ATENTS.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 slidin g 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></pa per-tab>

166 <paper-tab><a href="#item2" horizontal center-center layout>ITEM TWO</a></pa per-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>

OLD	NEW

« no previous file with comments | « third_party/polymer/components/paper-tabs/bower.json ('k') | third_party/polymer/components/paper-tabs/index.html » ('j') | no next file with comments »