Skip to content

Instantly share code, notes, and snippets.

@JanMiksovsky

JanMiksovsky/bower.json

Last active April 5, 2016 21:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JanMiksovsky/2415995251b0d9941c44c4a9a2cf75c0 to your computer and use it in GitHub Desktop.
Save JanMiksovsky/2415995251b0d9941c44c4a9a2cf75c0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bower.json
{
"name": "issue-16",
"version": "0.0.0",
"dependencies": {
"iron-pages": "PolymerElements/iron-pages",
"paper-tabs": "PolymerElements/paper-tabs"
}
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Issue #16</title>
<script>
// Tell any Polymer elements to use Shadow DOM.
window.Polymer = window.Polymer || {};
window.Polymer.dom = 'shadow';
</script>
<link rel="import" href="test-element.html">
<style>
body {
display: flex;
height: 100%;
left: 0;
margin: 0;
position: absolute;
top: 0;
width: 100%;
}
test-element {
flex: 1;
}
</style>
</head>
<body>
<test-element>
<div>Thing 1</div>
<div>Thing 2</div>
<div>Thing 3</div>
</test-element>
</body>
</html>
Raw
package.json
{
"name": "issue-16",
"version": "0.0.0",
"dependencies": {
"basic-arrow-selection": "^0.7.5",
"basic-page-dots": "^0.7.5",
"basic-carousel": "^0.7.5",
"webcomponents.js": "^0.7.2"
}
}
Raw
test-element.html
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<script src="node_modules/basic-arrow-selection/dist/basic-arrow-selection.js"></script>
<script src="node_modules/basic-page-dots/dist/basic-page-dots.js"></script>
<script src="node_modules/basic-carousel/dist/basic-carousel.js"></script>
<dom-module id="test-element">
<template>
<style>
:host {
display: flex;
flex-direction: column;
}
iron-pages,
basic-arrow-selection,
basic-page-dots,
basic-carousel {
display: flex;
flex: 1;
}
</style>
<paper-tabs selected="{{selected}}">
<paper-tab>First</paper-tab>
<paper-tab>Second</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}">
<basic-arrow-selection class="overlay" aria-label="Images">
<basic-page-dots>
<basic-carousel>
<content></content>
</basic-carousel>
</basic-page-dots>
</basic-arrow-selection>
<div>Second tab</div>
</iron-pages>
</template>
</dom-module>
<script>
Polymer({
is: 'test-element',
properties: {
selected: {
value: 0
}
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment