A very good YouTube channel Dabble Lab on Alexa APL design.
Alexa developer documentation
Lab1 Containers
Frame layout in Container.
code:
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
{
"type": "APL",
"version": "1.7",
"settings": {},
"theme": "dark",
"import": [],
"resources": [
{
"dimensions": {
"boxWidth": "100%",
//"boxWidth": 120,
"boxHeight": 120
},
"colors": {
"pink": "#dc267f",
"orange": "#fe6100",
"blue": "#648fff"
}
}
],
"styles": {},
"onMount": [],
"graphics": {},
"commands": {},
"layouts": {},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"width": "100vw",
"height": "100vh",
//"direction": "row",
//"justifyContent": "center",
"alignItems": "center",
"wrap": "wrap",
"items": [
{
"type": "Frame",
"backgroundColor": "grey",
"display": "nromal",
"opacity": 0.7,
"width": "100%",
"height": "100%",
"position": "absolute",
"alignSelf": "start",
// "top": 30,
//"bottom": 30,
//"left": 30,
//"right": 30,
//"grow": 1,
"description": "frame1 - pink"
},
{
"type": "Frame",
"backgroundColor": "@orange",
//"display": "invisible",
"width": "@boxWidth",
"height": "@boxHeight",
//"height": "100%",
//"grow": 1,
//"shrink": 1,
//"spacing": 40,
"description": "frame2 - orange"
},
{
"type": "Frame",
"backgroundColor": "@blue",
//"display": "none",
"width": "@boxWidth",
"height": "@boxHeight",
//"grow": 1,
//"spacing": 40,
"description": "frame3 - blue"
}
]
}
]
}
}