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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
define.class("$server/composition",function(require, $ui$, checkbox, screen, label, view, icon, cadgrid) {
this.render = function() {
return [
screen(
cadgrid({
name:"grid",
bgcolor:"#4e4e4e",
gridsize:8,
majorevery:5,
majorline:vec4(0.34117648005485535,0.34117648005485535,0.34117648005485535,1),
minorline:vec4(0.2823529541492462,0.2823529541492462,0.2823529541492462,1),
alignself:'stretch',
flexdirection:'row',
alignitems:"center",
justifycontent:'space-around'
},
view({ flexdirection:"column", flex:0 },
label({text:"Basic Usage", marginbottom:20}),
checkbox({
bgcolor:"transparent",
textcolor:"transparent",
textactivecolor:"white",
click:function(){
this.find("status").text = "Value is: " + this.value
}
}),
label({name:"status", text:"Value is: false", fontsize:12, margintop:5})
),
view({ flexdirection:"column", flex:0 },
checkbox({
icon:"square-o",
text:"Checkbox One Unselected (FALSE)",
borderwidth:0,
bgcolor:"transparent",
textcolor:"white",
textactivecolor:"white",
click:function(){
this.icon = this.value ? "check-square-o" : "square-o"
this.text = "Checkbox One " + (this.value ? "Selected (TRUE)" : "Unselected (FALSE)")
}
}),
checkbox({
icon:"square-o",
text:"Checkbox Two Unselected (FALSE)",
borderwidth:0,
bgcolor:"transparent",
textcolor:"white",
textactivecolor:"white",
click:function(){
this.icon = this.value ? "check-square-o" : "square-o"
this.text = "Checkbox Two " + (this.value ? "Selected (TRUE)" : "Unselected (FALSE)")
}
}),
checkbox({
value:true,
icon:"check-square-o",
text:"Checkbox Three Selected (TRUE)",
borderwidth:0,
bgcolor:"transparent",
textcolor:"white",
textactivecolor:"white",
click:function(){
this.icon = this.value ? "check-square-o" : "square-o"
this.text = "Checkbox Three " + (this.value ? "Selected (TRUE)" : "Unselected (FALSE)")
}
}),
checkbox({
value:true,
icon:"check-square-o",
text:"Checkbox Four Selected (TRUE)",
borderwidth:0,
bgcolor:"transparent",
textcolor:"white",
textactivecolor:"white",
click:function(){
this.icon = this.value ? "check-square-o" : "square-o"
this.text = "Checkbox Four " + (this.value ? "Selected (TRUE)" : "Unselected (FALSE)")
}
})
),
view({ flexdirection:"column", flex:0 },
label({text:"Icon w/ text", marginbottom:20}),
checkbox({
icon:"star-o",
text:"My value is: false",
bgcolor:"transparent",
borderwidth:0,
textcolor:"white",
textactivecolor:"pink",
fontsize:30,
pickalpha:-1,
click:function(){
this.icon = this.value ? "star" : "star-o";
this.text = "My value is: " + this.value
}
})
),
view({ flexdirection:"column", flex:0 },
label({text:"Background Image", marginbottom:20}),
checkbox({
icon:undefined,
width:40,
bgimage:"$resources/textures/purplecloud.png",
bgimagemode:"stretch",
click:function(){
this.bgimage = this.value ? "$resources/textures/bluecloud.png" : "$resources/textures/purplecloud.png";
this.find("status").text = "Value is: " + this.value
}
}),
label({name:"status", text:"Value is: false", fontsize:12, margintop:5})
)
)
)
]
}
}
)
|