Skip to content

Instantly share code, notes, and snippets.

@Torgen

Torgen/index.html

Created September 13, 2017 05:49
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 Torgen/9a2c965fef25e6d0b12e32e71b93fa32 to your computer and use it in GitHub Desktop.
Save Torgen/9a2c965fef25e6d0b12e32e71b93fa32 to your computer and use it in GitHub Desktop.
Download ZIP
Polymer Element Test Case // source https://jsbin.com/piqocih
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Element Test Case</title>
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="iron-pages/iron-pages.html">
<dom-module id="tabs-and-pages">
<template>
<paper-tabs selected="{{selected}}">
<slot name="tabs"></slot>
</paper-tabs>
<iron-pages selected="{{selected}}">
<slot name="pages"></slot>
</iron-pages>
</template>
<script>
window.addEventListener('WebComponentsReady', function(e) {
Polymer({
is: 'tabs-and-pages',
properties: {
selected: {
type: Number,
value: 0,
}
}
})
});
</script>
</dom-module>
<style id="jsbin-css">
/* Test case CSS can go here */
</style>
</head>
<body>
<tabs-and-pages>
<paper-tab slot="tabs">foo</paper-tab>
<div slot="pages">foo page</div>
<paper-tab slot="tabs">bar</paper-tab>
<div slot="pages">bar page</div>
</tabs-and-pages>
<!-- Test case HTML goes here -->
<script id="jsbin-javascript">
/* Test case JS can go here */
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Element Test Case</title>
<base href="//polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"><\/script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="iron-pages/iron-pages.html">
<dom-module id="tabs-and-pages">
<template>
<paper-tabs selected="{{selected}}">
<slot name="tabs"></slot>
</paper-tabs>
<iron-pages selected="{{selected}}">
<slot name="pages"></slot>
</iron-pages>
</template>
<script>
window.addEventListener('WebComponentsReady', function(e) {
Polymer({
is: 'tabs-and-pages',
properties: {
selected: {
type: Number,
value: 0,
}
}
})
});
<\/script>
</dom-module>
</head>
<body>
<tabs-and-pages>
<paper-tab slot="tabs">foo</paper-tab>
<div slot="pages">foo page</div>
<paper-tab slot="tabs">bar</paper-tab>
<div slot="pages">bar page</div>
</tabs-and-pages>
<\!-- Test case HTML goes here -->
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">/* Test case CSS can go here */</script>
<script id="jsbin-source-javascript" type="text/javascript">/* Test case JS can go here */</script></body>
</html>
Raw
jsbin.piqocih.css
/* Test case CSS can go here */
Raw
jsbin.piqocih.js
/* Test case JS can go here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment