Skip to content

Instantly share code, notes, and snippets.

@Analect

Analect/designer.html

Created October 3, 2014 16:13
Show Gist options
  • Save Analect/3740aa436dcf9a3d1a05 to your computer and use it in GitHub Desktop.
Save Analect/3740aa436dcf9a3d1a05 to your computer and use it in GitHub Desktop.
Download ZIP
designer
Raw
designer.html
<!doctype html>
<html>
<head>
<title>unquote</title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform/platform.js">
</script>
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import"
href="../components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../components/core-toolbar/core-toolbar.html">
<link rel="import"
href="../components/paper-tabs/paper-tabs.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
.container {
width: 80%;
margin: 50px auto;
}
@media (min-width: 481px) {
#tabs {
width: 200px;
}
.container {
width: 400px;
}
}
</style>
</head>
<body unresolved>
<core-header-panel>
<core-toolbar>
<paper-tabs id="tabs" selected="all" self-end>
<paper-tab name="all">All</paper-tab>
<paper-tab name="favorites">Favorites</paper-tab>
</paper-tabs>
</core-toolbar>
<!-- main page content will go here -->
</core-header-panel>
<script>
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function(e) {
console.log("Selected: " + tabs.selected);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment