Created
May 22, 2015 18:12
-
-
Save faizmalkani/1a12d1b4895b6d4f60fd to your computer and use it in GitHub Desktop.
Polymer Gists | Paper Tabs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Faiz Malkani | Paper Tabs Sample</title> | |
<meta name="author" content="Faiz Malkani"> | |
<!-- IMPORTING WEBCOMPONENTS --> | |
<script src="bower_components/webcomponentsjs/webcomponents.js"></script> | |
<link rel="import" href="bower_components/core-animated-pages/core-animated-pages.html"> | |
<link rel="import" href="bower_components/font-roboto/roboto.html"> | |
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html"> | |
<link href="bower_components/core-animated-pages/transitions/slide-from-right.html" rel="import"> | |
<style> | |
html, body | |
{ | |
height: 100%; | |
margin: 0px; | |
font-family: 'RobotoDraft', sans-serif; | |
overflow-x: hidden; | |
} | |
paper-tabs | |
{ | |
background-color: #00bcd4; | |
color: #fff; | |
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1); | |
} | |
core-animated-pages | |
{ | |
height: 100%; | |
} | |
section | |
{ | |
height: 100%; | |
font-size: 3em; | |
color: #555555; | |
font-weight: 300; | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- TABS WITH THE FIRST ONE SELECTED --> | |
<paper-tabs selected="0"> | |
<paper-tab>TAB 1</paper-tab> | |
<paper-tab>TAB 2</paper-tab> | |
<paper-tab>TAB 3</paper-tab> | |
</paper-tabs> | |
<!-- PAGES with the FIRST ONE SELECTED --> | |
<core-animated-pages selected="0" transitions="slide-from-right"> | |
<section>PAGE 1</section> | |
<section>PAGE 2</section> | |
<section>PAGE 3</section> | |
</core-animated-pages> | |
<script> | |
var tabs = document.querySelector('paper-tabs'); // Assigning paper-tabs to the tabs variable | |
var pages = document.querySelector('core-animated-pages'); // Assigning core-animated-pages to the pages variable | |
tabs.addEventListener('core-select',function() | |
{ | |
pages.selected = tabs.selected; // Listening for selection change in the tabs, and changing the selected page to match | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment