Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
bower_components
*.log
.idea
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@
"paper-icon-button": "Polymer/paper-icon-button#master",
"paper-ripple": "Polymer/paper-ripple#master"
}
}
}
9 changes: 9 additions & 0 deletions dev/DEVELOPMENT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# Development

Guidelines for running demo, testing functionality and contributing.

## Running demo

1) Install dependencies: `bower install`
2) Start HTTP server: `$ python -m SimpleHTTPServer`
3) Open Chrome/Mozilla browser `http://localhost:8000/dev-demo.html`
14 changes: 14 additions & 0 deletions dev/bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"name": "paper-tabs",
"private": true,
"dependencies": {
"core-icons": "Polymer/core-icons#master",

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These can move into the root "bower.json" and be set as the "devDependencies" rather than "dependencies" (which is intended for production).

"core-selector": "Polymer/core-selector#master",
"core-toolbar": "Polymer/core-toolbar#master",
"core-media-query": "Polymer/core-media-query#master",
"font-roboto": "Polymer/font-roboto#master",
"paper-icon-button": "Polymer/paper-icon-button#master",
"paper-ripple": "Polymer/paper-ripple#master",
"webcomponentsjs": "Polymer/webcomponentsjs#master"
}
}
235 changes: 235 additions & 0 deletions dev/dev-demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,235 @@
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html>
<head>
<title>paper-tabs</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

<script src="./bower_components/webcomponentsjs/webcomponents.js"></script>

<link rel="import" href="./bower_components/core-icons/core-icons.html">
<link rel="import" href="./bower_components/font-roboto/roboto.html">
<link rel="import" href="../paper-tabs.html">
<link rel="import" href="./bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="./bower_components/core-media-query/core-media-query.html">
<link rel="import" href="./bower_components/paper-icon-button/paper-icon-button.html">

<style shim-shadowdom>

body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0;
padding: 24px;
color: #333;
}

body.core-narrow {
padding: 8px;
}

paper-tabs, core-toolbar {
background-color: #00bcd4;
color: #fff;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}

core-toolbar paper-tabs {
box-shadow: none;
}

paper-tabs[noink][nobar] paper-tab.core-selected {
color: #ffff8d;
}

paper-tabs.transparent-teal {
background-color: transparent;
color: #00bcd4;
box-shadow: none;
}

paper-tabs.transparent-teal::shadow #selectionBar {
background-color: #00bcd4;
}

paper-tabs.transparent-teal paper-tab::shadow #ink {
color: #00bcd4;
}

h3 {
font-size: 16px;
font-weight: 400;
}

</style>

</head>
<body unresolved>

<h3>A. No ink effect and no sliding bar</h3>

<paper-tabs selected="0" noink nobar>

<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 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>C. The bar slides to the selected tab</h3>

<paper-tabs selected="0" noink>

<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>

</paper-tabs>

<br>
<br>

<h3>D. Inky Tabs</h3>

<paper-tabs selected="0">

<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>

</paper-tabs>

<br>
<br>

<paper-tabs selected="0" class="transparent-teal">

<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>

</paper-tabs>

<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>
<div flex>Title</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>

<div class="bottom fit" horizontal layout>

<paper-tabs selected="0" flex style="max-width: 600px;">

<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>

</paper-tabs>

</div>

</core-toolbar>

<br>
<br>

<core-toolbar class="tall">

<paper-tabs selected="0" class="bottom" self-end style="width: 300px;">

<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>

</paper-tabs>

<div class="bottom" flex></div>

<paper-icon-button class="bottom" icon="search"></paper-icon-button>

</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);
var scrollableTabs = document.querySelector('#scrollableTabs')
if (scrollableTabs) {
console.log(scrollableTabs);
scrollableTabs.updateBar();
} else {
throw Error("#scrollableTabs element could not be found in the document")
}
});

</script>

</body>
</html>