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
|
<style>
:host([expanded]) {
#json-content {
max-height: 50vh;
overflow: auto;
border-top: 1px solid lightgray;
padding: 2px;
height: auto;
}
#close-icon {
display: block;
}
#open-icon {
display: none;
}
}
#json-content {
border-top: none;
height: 0;
overflow: hidden;
transition: height 0.3s;
}
#close-icon {
display: none;
}
#open-icon {
display: block;
}
.container {
border: 1px solid lightgray;
max-width: 50em;
margin: 2px 0;
}
.toggle-icon {
fill: lightgray;
transition: fill 0.3s;
}
#json-header {
align-items: center;
cursor: pointer;
display: flex;
font-weight: bold;
justify-content: space-between;
padding: 2px;
transition: background-color 0.3s;
&:hover {
background-color: rgb(242, 242, 242);
& .toggle-icon {
fill: gray;
}
}
&:active {
background-color: rgb(234, 234, 234);
& .toggle-icon {
fill: black;
}
}
}
</style>
<div class="container">
<div id="json-header">
<span id="title"></span>
<div class="toggle-icon">
<!-- When collapsed-->
<span id="open-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z">
</svg>
</span>
<!-- When expanded-->
<span id="close-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z">
</svg>
</span>
</div>
</div>
<div id="json-content"></div>
</div>
|
