-
Notifications
You must be signed in to change notification settings - Fork 57
Expand file tree
/
Copy pathArrayAttributes.njs
More file actions
73 lines (66 loc) · 2.02 KB
/
ArrayAttributes.njs
File metadata and controls
73 lines (66 loc) · 2.02 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
import Nullstack from 'nullstack'
class ArrayAttributes extends Nullstack {
classes = 'c'
styles = 'color: black;'
count = 1
objected = false
increment() {
this.count++
}
double() {
this.count += this.count
}
render() {
return (
<div data-count={this.count} data-objected={this.objected} data-hydrated={this.hydrated}>
<span class={this.classes}> {JSON.stringify(this.classes)} </span>
<span style={this.styles}> {JSON.stringify(this.styles)} </span>
<button onclick={{ classes: 'd' }} data-d>
d
</button>
<button onclick={{ classes: ['a', 'b'] }} data-ab>
a b
</button>
<button onclick={{ classes: ['a', 'b', 'c'] }} data-abc>
a b c
</button>
<button onclick={{ classes: ['e', false && 'f', undefined && 'f', null && 'f', 0 && 'f'] }} data-e>
e
</button>
<button onclick={{ styles: 'color: purple;' }} data-purple>
purple
</button>
<button onclick={{ styles: ['color: pink;', 'background-color: blue;'] }} data-pink-blue>
pink-blue
</button>
<button
onclick={{ styles: ['color: pink;', 'background-color: blue; border: 1px solid red;'] }}
data-pink-blue-red
>
pink-blue-red
</button>
<button
onclick={{
styles: [
'color: green;',
false && 'background-color: blue;',
undefined && 'background-color: blue;',
null && 'background-color: blue;',
0 && 'background-color: blue;',
],
}}
data-green
>
green
</button>
<button onclick={[this.increment, this.double, { objected: true }]} data-events>
{this.count}
</button>
{this.count > 1 && (
<span class={['dynamic-a', 'dynamic-b']} style={['color: pink;', 'background-color: blue;']} />
)}
</div>
)
}
}
export default ArrayAttributes