Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: polymer_0.5.0/bower_components/paper-tabs/demo.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 12 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:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « polymer_0.5.0/bower_components/paper-tabs/bower.json ('k') | polymer_0.5.0/bower_components/paper-tabs/index.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: polymer_0.5.0/bower_components/paper-tabs/demo.html
diff --git a/bower_components/paper-tabs/demo.html b/polymer_0.5.0/bower_components/paper-tabs/demo.html
similarity index 63%
rename from bower_components/paper-tabs/demo.html
rename to polymer_0.5.0/bower_components/paper-tabs/demo.html
index 20b6fc88a988706185f7acb5761cc00cc7fc4429..2dedd12d7899d143580ac911c6f100fab52cdef5 100644
--- a/bower_components/paper-tabs/demo.html
+++ b/polymer_0.5.0/bower_components/paper-tabs/demo.html
@@ -12,13 +12,15 @@
<head>
<title>paper-tabs</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
- <script src="../platform/platform.js"></script>
+
+ <script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-icons/core-icons.html">
+ <link rel="import" href="../font-roboto/roboto.html">
<link rel="import" href="paper-tabs.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
+ <link rel="import" href="../core-media-query/core-media-query.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
- <link rel="import" href="../font-roboto/roboto.html">
<style shim-shadowdom>
@@ -27,12 +29,10 @@
margin: 0;
padding: 24px;
color: #333;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-tap-highlight-color: rgba(0,0,0,0);
- -webkit-touch-callout: none;
+ }
+
+ body.core-narrow {
+ padding: 8px;
}
paper-tabs, core-toolbar {
@@ -85,8 +85,21 @@
<br>
<br>
+
+ <h3>B. The bottom bar appears to indicate the selected tab, but without sliding effect.</h3>
+
+ <paper-tabs selected="0" noink noslide>
+
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>ITEM THREE</paper-tab>
+
+ </paper-tabs>
+
+ <br>
+ <br>
- <h3>B. The bar slides to the selected tab</h3>
+ <h3>C. The bar slides to the selected tab</h3>
<paper-tabs selected="0" noink>
@@ -99,7 +112,7 @@
<br>
<br>
- <h3>C. Inky Tabs</h3>
+ <h3>D. Inky Tabs</h3>
<paper-tabs selected="0">
@@ -123,6 +136,43 @@
<br>
<br>
+ <h3>E. Scrollable Tabs</h3>
+
+ <paper-tabs id="scrollableTabs" selected="0" scrollable>
+
+ <paper-tab>NUMBER ONE ITEM</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>THE THIRD ITEM</paper-tab>
+ <paper-tab>THE ITEM FOUR</paper-tab>
+ <paper-tab>FIFTH</paper-tab>
+ <paper-tab>THE SIXTH TAB</paper-tab>
+ <paper-tab>NUMBER SEVEN</paper-tab>
+ <paper-tab>EIGHT</paper-tab>
+ <paper-tab>NUMBER NINE</paper-tab>
+ <paper-tab>THE TENTH</paper-tab>
+ <paper-tab>THE ITEM ELEVEN</paper-tab>
+ <paper-tab>TWELFTH ITEM</paper-tab>
+
+ </paper-tabs>
+
+ <br>
+ <br>
+
+ <h3>F. Link Tabs</h3>
+
+ <paper-tabs selected="0" link>
+
+ <paper-tab><a href="#item1" horizontal center-center layout>ITEM ONE</a></paper-tab>
+ <paper-tab><a href="#item2" horizontal center-center layout>ITEM TWO</a></paper-tab>
+ <paper-tab><a href="#item3" horizontal center-center layout>ITEM THREE</a></paper-tab>
+
+ </paper-tabs>
+
+ <br>
+ <br>
+
+ <h3>G. Tabs in Toolbar</h3>
+
<core-toolbar class="medium-tall">
<paper-icon-button icon="menu"></paper-icon-button>
@@ -149,7 +199,7 @@
<core-toolbar class="tall">
- <paper-tabs selected="0" class="bottom indent" style="width: 200px;" self-end>
+ <paper-tabs selected="0" class="bottom" self-end style="width: 300px;">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
@@ -162,5 +212,18 @@
</core-toolbar>
+ <!-- detect when window is narrow -->
+ <core-media-query id="mediaQuery" query="max-width: 640px"></core-media-query>
+
+ <script>
+
+ document.querySelector('#mediaQuery').addEventListener('core-media-change',
+ function(e) {
+ document.body.classList.toggle('core-narrow', e.detail.matches);
+ document.querySelector('#scrollableTabs').updateBar();
+ });
+
+ </script>
+
</body>
</html>
« no previous file with comments | « polymer_0.5.0/bower_components/paper-tabs/bower.json ('k') | polymer_0.5.0/bower_components/paper-tabs/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698