forked from Polymer/old-docs-site
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemo-tabs.html
More file actions
95 lines (90 loc) · 3.49 KB
/
demo-tabs.html
File metadata and controls
95 lines (90 loc) · 3.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-selector/core-selector.html">
<link rel="import" href="../components/core-icons/core-icons.html">
<link rel="import" href="../components/plunker-button/plunker-button.html">
<polymer-element name="demo-tab" attributes="heading" noscript>
<template>
<style>
:host {
display: none;
}
:host(.selected) {
display: block;
}
</style>
<content></content>
</template>
</polymer-element>
<polymer-element name="demo-tabs" attributes="selected bottom theme demoSrc">
<template>
<link rel="stylesheet" href="../css/elements/demo-tabs.css">
<div id="container" class="{{theme}}">
<div id="tabstrip" layout horizontal center>
<core-selector selected="{{selected}}" selectedClass="selected" class="tab-wrapper" flex>
<template repeat="{{panel in panels}}">
<span>{{panel.heading}}</span>
</template>
</core-selector>
<template if="{{demoSrc}}">
<plunker-button src="{{demoSrc}}">Edit on Plunker</plunker-button>
</template>
</div>
<div id="wrapper" class="{{ {bottom: bottom} | tokenList}}">
<core-selector id="contents" selected="{{selected}}" selectedClass="selected">
<content id="contentpanels" select="demo-tab"></content>
</core-selector>
<div id="results" class="show">
<content id="contentresults" select=".result"></content>
</div>
</div>
</div>
</template>
<script>
Polymer('demo-tabs', {
/**
* If set, the `demoSrc` attribute will add a `plunker-button` to let the
* user preview the demo on the Plunker service. The value of `demoSrc`
* should be a path that points to the `manifest.json` for the demo.
*
* ex: <demo-tabs demoSrc="/samples/components/age-slider/manifest.json">
*
* @attribute demoSrc
* @type string
* @default null
*/
demoSrc: null,
theme: 'light',
selected: 0,
bottom: false, // Force results panel to be on bottom, even on desktop.
domReady: function() {
// Wait for domReady so demo-tab.panel is available in updatePanels.
this.updatePanels();
},
updatePanels: function() {
this.panels = Array.prototype.slice.call(
this.$.contentpanels.getDistributedNodes());
// If no <demo-tab> light dom have headings attributes, hide #tabstrip.
var noHeadings = true;
for (var i = 0, panel; panel = this.panels[i]; ++i) {
if (panel.heading) {
noHeadings = false;
break;
}
}
this.$.tabstrip.hidden = noHeadings;
this.$.results.classList.toggle(
'show', this.$.contentresults.getDistributedNodes().length);
this.onMutation(this, this.updatePanels); // Watch changes to light dom.
}
});
</script>
</polymer-element>