/
paper-toggle-subheader.html
103 lines (84 loc) · 2.12 KB
/
paper-toggle-subheader.html
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
96
97
98
99
100
101
102
103
<!doctype html>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<!--
A Material Design sub headers that can be toggle between active and inactive state
### Example
```html
<paper-toggle-subheader
active={{showHelp}}
icon-inactive='help-outline'
icon-active='close'>
Sub header with toggle icon
</paper-toggle-subheader>
```
@demo demo/index.html
-->
<dom-module id="paper-toggle-subheader">
<template>
<style include="iron-flex">
:host {
color: var(--secondary-text-color);
padding: 0 16px;
min-height: 40px;
height: 40px;
@apply --layout-horizontal;
@apply --layout-center;
@apply --paper-font-body1;
cursor: default;
}
</style>
<div class="flex"><slot></slot></div>
<paper-icon-button id="togglebutton" on-tap="_toggle" icon="[[_icon]]" hidden="[[!_icon]]"></paper-icon-button>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'paper-toggle-subheader',
properties: {
/**
* Fired when the user toggles from the inactive to the active state.
*
* @event toggle-active
*/
/**
* Fired when the user toggles from the active to the inactive state.
*
* @event toggle-inactive
*/
/**
* True if the toggle is active
*/
active: {
type: Boolean,
value: false,
notify: true
},
/**
* Icon that is shown if the element is in active state
*/
iconActive: String,
/**
* Icon that is shown if the element is in inactive state
*/
iconInactive: String,
_icon: {
type: String,
computed: '_computeIcon(active,iconActive,iconInactive)'
}
},
// Private methods
_toggle: function() {
this.active = !this.active;
this.fire(this.active ? 'toggle-active' : 'toggle-inactive');
},
_computeIcon: function(active, iconActive, iconInactive) {
return active ? iconActive : iconInactive;
}
});
})();
</script>