Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 18, 2017 21:39
Show Gist options
  • Save anonymous/b507cbb5bc462ef810bfa4d80e5215a9 to your computer and use it in GitHub Desktop.
Save anonymous/b507cbb5bc462ef810bfa4d80e5215a9 to your computer and use it in GitHub Desktop.
Download ZIP
paper-tabs with iron-pages
Raw
index.html
<head>
<!-- <base href="https://polygit.org/polymer+1.7.0/components/"> -->
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-tabs/paper-tab.html">
<link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
<my-element></my-element>
<dom-module id="my-element">
<style>
:root {
--paper-tabs-selection-bar-color: var(--paper-light-blue-900);
--paper-tab-ink: var(--paper-light-blue-100);
--paper-tabs: {
color: white;
background-color: var(--paper-light-blue-500);
};
}
</style>
<template>
<paper-tabs selected="{{selected}}">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}">
<div>
{{model.tab1.content}}
</div>
<div>
{{model.tab2.content}}
</div>
</iron-pages>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'my-element',
properties : {
selected: {
type: Number,
value: 0
},
model: {
type: Object,
value: function() {
return {
tab1: { content: 'foo' },
tab2: { content: 'bar' }
}
}
}
}
});
});
</script>
</dom-module>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment