blob: f5a0b9b7d9f4b03423e50a003edd4ef8dfc426a3 (
plain)
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
|
<!--
@license
Copyright (c) 2016 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="../iron-collapse.html">
<link rel="import" href="../../paper-styles/shadow.html">
<dom-module id="simple-expand-collapse">
<template>
<style>
:host {
display: block;
}
#trigger {
padding: 10px 15px;
background-color: #f3f3f3;
border: 1px solid #dedede;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-align: left;
}
:host([opened]) #trigger {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
iron-collapse {
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
@apply --shadow-elevation-2dp;
}
</style>
<button id="trigger" on-click="toggle" aria-expanded$="[[opened]]" aria-controls="collapse">[[_getText(opened)]]</button>
<iron-collapse id="collapse" opened="{{opened}}" horizontal="[[horizontal]]" no-animation="[[noAnimation]]" tabindex="0">
<slot></slot>
</iron-collapse>
</template>
</dom-module>
<script>
Polymer({
is: 'simple-expand-collapse',
properties: {
horizontal: {type: Boolean},
opened: {type: Boolean, reflectToAttribute: true},
noAnimation: {type: Boolean},
},
toggle: function() {
this.$.collapse.toggle();
},
_getText: function(opened) {
return opened ? 'Collapse' : 'Expand';
}
});
</script>
|
