Skip to content

Instantly share code, notes, and snippets.

@hernandazevedozup

hernandazevedozup/1

Last active June 28, 2022 18:37
Show Gist options
  • Save hernandazevedozup/eba4f2eb6afd6d6769a549fe037c1613 to your computer and use it in GitHub Desktop.
Save hernandazevedozup/eba4f2eb6afd6d6769a549fe037c1613 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
1
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "r"
}
}],
"properties": {
"flex":2,
"backgroundColor": "#FF0000"
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "g"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#00FF00"
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "b"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#0000FF"
}
}]
}
Raw
10
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et ipsum eu nunc semper dapibus vitae id urna. Aenean fermentum purus vitae leo congue varius vel nec ligula. Ut feugiat consectetur augue mattis tempus. Curabitur a erat nec lectus convallis vestibulum. Pellentesque suscipit id tellus ac dapibus. Vivamus aliquam, urna eu ornare euismod, arcu purus vestibulum dolor, ac tempus ante metus mollis ipsum. Ut eget tellus mollis, efficitur sapien in, pulvinar neque.",
"maxLines": 1
}
}],
"properties": {
"backgroundColor": "#CCCCCCFF",
"width": 300.0,
"clipped": true
}
}
Raw
11
{
"_:component": "layout:flowRow",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "r"
}
}],
"properties": {
"width": 50.0,
"height": 30.0,
"backgroundColor": "#FF0000"
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "g"
}
}],
"properties": {
"width": 100.0,
"height": 30.0,
"backgroundColor": "#3FB0D0"
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "g"
}
}],
"properties": {
"width": 80.0,
"height": 30.0,
"backgroundColor": "#00F00F"
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "g"
}
}],
"properties": {
"width": 80.0,
"height": 30.0,
"backgroundColor": "#F5D78F"
}
}],
"properties": {
"backgroundColor": "#CCCCCCFF",
"width": 200.0
}
}
Raw
11_1
{
"_:component": "layout:flowColumn",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "r"
}
}],
"properties": {
"width": 50.0,
"height": 30.0,
"backgroundColor": "#FF0000"
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "g"
}
}],
"properties": {
"width": 100.0,
"height": 30.0,
"backgroundColor": "#3FB0D0"
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "g"
}
}],
"properties": {
"width": 80.0,
"height": 30.0,
"backgroundColor": "#00F00F"
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "g"
}
}],
"properties": {
"width": 80.0,
"height": 30.0,
"backgroundColor": "#F5D78F"
}
}],
"properties": {
"backgroundColor": "#CCCCCCFF",
"height": 100.0
}
}
Raw
13
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "Hello"
}
}],
"properties": {
"width": 100.0,
"height": 100.0,
"margin": 10.0,
"borderWidth": 10.0,
"cornerRadius": 50.0,
"borderColor": "#FF0000",
"crossAxisAlignment": "center",
"mainAxisAlignment": "center"
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "Hello"
}
}],
"properties": {
"width": 100.0,
"height": 100.0,
"margin": 10.0,
"borderWidth": 10.0,
"cornerRadius": 33.3,
"borderColor": "#00FF00",
"borderDashLength": 10.0,
"borderDashSpacing": 10.0,
"backgroundColor": "#0000FF"
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "layout:text",
"properties": {
"text": "Hello"
}
}],
"properties": {
"width": 100.0,
"height": 100.0,
"margin": 10.0,
"borderWidth": 10.0,
"borderColor": "#0000FF",
"borderDashLength": 10.0,
"borderDashSpacing": 10.0,
"crossAxisAlignment": "center",
"mainAxisAlignment": "center"
}
}]
}
Raw
15
{
"_:component": "layout:positioned",
"children": [
{
"_:component": "layout:positioned",
"children": [{
"_:component": "layout:row",
"children" : [{
"_:component": "layout:text",
"properties": {
"text": "r"
}
}]
}],
"properties": {
"backgroundColor": "#FF0000",
"width": 50.0,
"height": 50.0
}
},
{
"_:component": "layout:positioned",
"children": [{
"_:component": "layout:row",
"children" : [{
"_:component": "layout:text",
"properties": {
"text": "b"
}
}]
}],
"properties": {
"backgroundColor": "#0000FF",
"width": 50.0,
"height": 50.0,
"x": 25.0,
"y": 25.0
}
}],
"properties": {
"backgroundColor": "#CCCCCCFF",
"width": 75.0,
"height": 75.0
}
}
Raw
16
{
"_:component": "layout:positioned",
"children": [
{
"_:component": "layout:positioned",
"children": [{
"_:component": "layout:row",
"children" : [{
"_:component": "layout:text",
"properties": {
"text": "r"
}
}]
}],
"properties": {
"alignmentSelf": "topStart",
"backgroundColor": "#FF0000",
"width": 50.0,
"height": 50.0,
"x": 10.0,
"y": 10.0
}
},
{
"_:component": "layout:positioned",
"children": [{
"_:component": "layout:row",
"children" : [{
"_:component": "material:text",
"properties": {
"text": "g"
}
}]
}],
"properties": {
"alignmentSelf": "topEnd",
"backgroundColor": "#00FF00",
"width": 50.0,
"height": 50.0,
"x": -10.0,
"y": 10.0
}
},
{
"_:component": "layout:positioned",
"children": [{
"_:component": "layout:row",
"children" : [{
"_:component": "material:text",
"properties": {
"text": "b"
}
}]
}],
"properties": {
"alignmentSelf": "bottomStart",
"backgroundColor": "#0000FF",
"width": 50.0,
"height": 50.0,
"x": 10.0,
"y": -10.0
}
},
{
"_:component": "layout:positioned",
"children": [{
"_:component": "layout:row",
"children" : [{
"_:component": "material:text",
"properties": {
"text": "m"
}
}]
}],
"properties": {
"selfAlignment": "bottomEnd",
"backgroundColor": "#FFFF00",
"width": 50.0,
"height": 50.0,
"x": -10.0,
"y": -10.0
}
}
],
"properties": {
"alignment": "topStart",
"backgroundColor": "#CCCCCCFF",
"width": 150.0,
"height": 150.0
}
}
Raw
19
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "Shadow example"
}
}
],
"properties": {
"width": 200.0,
"height": 200.0,
"margin": 60.0,
"shadow": [
{
"x": 0.0,
"y": 5.0,
"blur": 15.0,
"spread": 5,
"color": "#0000FF"
}
],
"crossAxisAlignment": "center",
"mainAxisAlignment": "center"
}
}
],
"properties": {
"backgroundColor": "#FFFFFF",
"crossAxisAlignment": "center",
"height": 350.0,
"width": 350.0
}
}
Raw
19_1
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "Shadow example"
}
}
],
"properties": {
"backgroundColor": "#FF0000",
"width": 200.0,
"height": 200.0,
"margin": 60.0,
"cornerRadius": 100.0,
"shadow": [
{
"x": 0.0,
"y": 0.0,
"blur": 25.0,
"spread": 25,
"color": "#0000FF"
},
{
"x": 0.0,
"y": 0.0,
"blur": 15.0,
"spread": 15,
"color": "#00FF00"
}
],
"crossAxisAlignment": "center",
"mainAxisAlignment": "center"
}
}
],
"properties": {
"backgroundColor": "#FFFFFF",
"crossAxisAlignment": "center",
"height": 350.0,
"width": 350.0
}
}
Raw
2
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "r"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#FF00FF",
"height": 50.0,
"marginStart": 10
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "g"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#00FF00",
"height": 50.0,
"marginStart": 10
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "b"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#0000FF",
"height": 50.0,
"marginStart": 10
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC"
}
}
Raw
21
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:scroll",
"children": [
{
"_:component": "layout:column",
"children": [
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "r"
}
}
],
"properties": {
"height": 80.0,
"width": 300.0,
"backgroundColor": "#FF0000"
}
},
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "b"
}
}
],
"properties": {
"height": 80.0,
"width": 300.0,
"backgroundColor": "#0000FF"
}
},
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "b"
}
}
],
"properties": {
"height": 80.0,
"width": 300.0,
"backgroundColor": "#0000FF"
}
},
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "b"
}
}
],
"properties": {
"height": 80.0,
"width": 300.0,
"backgroundColor": "#0000FF"
}
},
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "b"
}
}
],
"properties": {
"height": 80.0,
"width": 300.0,
"backgroundColor": "#0000FF"
}
}
]
}
],
"properties": {
"direction": "vertical"
}
}
],
"properties": {
"backgroundColor": "#CCCCCCFF",
"height": 200.0,
"width": 300.0
}
}
Raw
22
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:scroll",
"children": [
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "r"
}
}
],
"properties": {
"height": 80.0,
"width": 300.0,
"backgroundColor": "#FF0000"
}
},
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "b"
}
}
],
"properties": {
"height": 80.0,
"width": 300.0,
"backgroundColor": "#0000FF"
}
},
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "b"
}
}
],
"properties": {
"height": 80.0,
"width": 300.0,
"backgroundColor": "#0000FF"
}
},
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "b"
}
}
],
"properties": {
"height": 80.0,
"width": 300.0,
"backgroundColor": "#0000FF"
}
},
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "b"
}
}
],
"properties": {
"height": 80.0,
"width": 300.0,
"backgroundColor": "#0000FF"
}
}
]
}
]
}
],
"properties": {
"backgroundColor": "#CCCCCCFF",
"height": 40.0,
"width": 300.0
}
}
Raw
3
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "r"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#FF0000",
"height": 50.0,
"paddingStart": 10
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "g"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#00FF00",
"height": 50.0,
"paddingStart": 10
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "b"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#0000FF",
"height": 50.0,
"paddingStart": 10
}
}],
"properties": {
"backgroundColor": "#CCCCCCFF"
}
}
Raw
4
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "r"
}
}],
"properties": {
"flex":2,
"backgroundColor": "#FF0000",
"height": 50.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "g"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#00FF00",
"height": 50.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "b"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#0000FF",
"height": 50.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC"
}
}
Raw
5
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "r"
}
}],
"properties": {
"flex":2,
"backgroundColor": "#FF0000",
"height": 150.0,
"marginTop": 10,
"marginBottom": 10
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "g"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#00FF00",
"height": 150.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "b"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#0000FF",
"height": 150.0,
"paddingTop": 10,
"paddingBottom": 10
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC"
}
}
Raw
6
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "r"
}
}],
"properties": {
"backgroundColor": "#FF0000",
"height": 100.0,
"width": 100.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "g"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#00FF00",
"marginStart": 20.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC",
"crossAxisAlignment": "stretch"
}
}
Raw
6_1
{
"_:component": "layout:column",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "r"
}
}],
"properties": {
"backgroundColor": "#FF0000",
"height": 100.0,
"width": 100.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "g"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#00FF00",
"marginTop": 20.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC",
"crossAxisAlignment": "stretch"
}
}
Raw
7_1
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "flex-start"
}
}],
"properties": {
"backgroundColor": "#0000FF",
"height": 100.0,
"width": 100.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": ""
}
}],
"properties": {
"backgroundColor": "#FF0000",
"height": 100.0,
"width": 100.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC",
"mainAxisAlignment": "start",
"height": 250.0,
"width": 250.0
}
}
Raw
7_2
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "flex-end"
}
}],
"properties": {
"backgroundColor": "#0000FF",
"height": 100.0,
"width": 100.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": ""
}
}],
"properties": {
"backgroundColor": "#FF0000",
"height": 100.0,
"width": 100.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC",
"mainAxisAlignment": "end",
"height": 250.0,
"width": 250.0
}
}
Raw
7_3
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "center"
}
}],
"properties": {
"backgroundColor": "#0000FF",
"height": 100.0,
"width": 100.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": ""
}
}],
"properties": {
"backgroundColor": "#FF0000",
"height": 100.0,
"width": 100.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC",
"mainAxisAlignment": "center",
"height": 250.0,
"width": 250.0
}
}
Raw
7_4
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "space-around"
}
}],
"properties": {
"backgroundColor": "#0000FF",
"height": 100.0,
"width": 100.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": ""
}
}],
"properties": {
"backgroundColor": "#FF0000",
"height": 100.0,
"width": 100.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC",
"mainAxisAlignment": "spaceAround",
"height": 250.0,
"width": 250.0
}
}
Raw
7_5
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "space-between"
}
}],
"properties": {
"backgroundColor": "#0000FF",
"height": 100.0,
"width": 100.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": ""
}
}],
"properties": {
"backgroundColor": "#FF0000",
"height": 100.0,
"width": 100.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC",
"mainAxisAlignment": "spaceBetween",
"height": 250.0,
"width": 250.0
}
}
Raw
7_6
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "space-evenly"
}
}],
"properties": {
"backgroundColor": "#0000FF",
"height": 100.0,
"width": 100.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": ""
}
}],
"properties": {
"backgroundColor": "#FF0000",
"height": 100.0,
"width": 100.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC",
"mainAxisAlignment": "spaceEvenly",
"height": 250.0,
"width": 250.0
}
}
Raw
8_1
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "flex-start"
}
}],
"properties": {
"backgroundColor": "#0000FF",
"height": 100.0,
"width": 100.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": ""
}
}],
"properties": {
"backgroundColor": "#FF0000",
"height": 100.0,
"width": 100.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC",
"crossAxisAlignment": "start",
"height": 250.0,
"width": 250.0
}
}
Raw
8_2
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "flex-end"
}
}],
"properties": {
"backgroundColor": "#0000FF",
"height": 100.0,
"width": 100.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": ""
}
}],
"properties": {
"backgroundColor": "#FF0000",
"height": 100.0,
"width": 100.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC",
"crossAxisAlignment": "end",
"height": 250.0,
"width": 250.0
}
}
Raw
8_3
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "center"
}
}],
"properties": {
"backgroundColor": "#0000FF",
"height": 100.0,
"width": 100.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": ""
}
}],
"properties": {
"backgroundColor": "#FF0000",
"height": 100.0,
"width": 100.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC",
"crossAxisAlignment": "center",
"height": 250.0,
"width": 250.0
}
}
Raw
8_4
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "no height, stretch"
}
}],
"properties": {
"backgroundColor": "#0000FF",
"width": 100.0
}
},
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": ""
}
}],
"properties": {
"backgroundColor": "#FF0000",
"width": 100.0
}
}],
"properties": {
"backgroundColor": "#FFCCCCCC",
"crossAxisAlignment": "stretch",
"width": 250.0,
"height": 450.0
}
}
Raw
9
{
"_:component": "layout:row",
"children": [{
"_:component": "material:text",
"properties": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et ipsum eu nunc semper dapibus vitae id urna. Aenean fermentum purus vitae leo congue varius vel nec ligula. Ut feugiat consectetur augue mattis tempus. Curabitur a erat nec lectus convallis vestibulum. Pellentesque suscipit id tellus ac dapibus. Vivamus aliquam, urna eu ornare euismod, arcu purus vestibulum dolor, ac tempus ante metus mollis ipsum. Ut eget tellus mollis, efficitur sapien in, pulvinar neque."
}
}],
"properties": {
"backgroundColor": "#CCCCCCFF",
"width": 300.0
}
}
Raw
column
{
"_:component": "layout:column",
"children": [
{
"_:component": "layout:column",
"children": [{
"_:component": "material:text",
"properties": {
"text": "r"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#FF0000"
}
},
{
"_:component": "layout:column",
"children": [{
"_:component": "material:text",
"properties": {
"text": "g"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#00FF00"
}
},
{
"_:component": "layout:column",
"children": [{
"_:component": "material:text",
"properties": {
"text": "b"
}
}],
"properties": {
"flex":1,
"backgroundColor": "#0000FF"
}
}],
"properties": {
"height": 150.0,
"backgroundColor": "#FFCCCCCC"
}
}
Raw
local_image
{
"_:component": "layout:localImage",
"properties": {
"id": "nimbus-local",
"width": 70.0,
"height": 70.0,
"scale": "center",
"accessibility" : {
"label": "This the golden nimbus"
}
}
}
Raw
remote_image
{
"_:component": "layout:remoteImage",
"properties": {
"url": "https://www.zup.com.br/wp-content/uploads/2021/03/Untitl22ed-1-1.png",
"placeholder": "placeholder-img",
"width": 70.0,
"height": 70.0,
"scale": "center",
"accessibility" : {
"label": "This the golden nimbus"
}
}
}
Raw
screen
{
"_:component": "layout:screen",
"children": [
{
"_:component": "layout:row",
"children": [
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "r"
}
}
],
"properties": {
"flex": 2,
"backgroundColor": "#FF0000"
}
},
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "g"
}
}
],
"properties": {
"flex": 1,
"backgroundColor": "#00FF00"
}
},
{
"_:component": "layout:row",
"children": [
{
"_:component": "material:text",
"properties": {
"text": "b"
}
}
],
"properties": {
"flex": 1,
"backgroundColor": "#0000FF"
}
}
]
}
],
"properties": {
"title": "Nimbus screen title",
"ignoreSafeArea": [],
"showBackButton": false
}
}
Raw
touchable
{
"_:component": "layout:column",
"children": [
{
"_:component": "layout:touchable",
"children": [{
"_:component": "material:text",
"properties": {
"text": "Go to screen two"
}
}],
"properties": {
"onPress": [{
"_:action": "push",
"properties": {
"url": "/screen2.json"
}
}],
"accessibility" : {
"label": "This is a clickable element",
"isHeader": true
}
}
},
{
"_:component": "layout:touchable",
"children": [{
"_:component": "material:text",
"properties": {
"text": "Go to screen two. Only Label."
}
}],
"properties": {
"onPress": [{
"_:action": "push",
"properties": {
"url": "/screen2.json"
}
}],
"accessibility" : {
"label": "This is a clickable element. Not Title."
}
}
},
{
"_:component": "layout:touchable",
"children": [{
"_:component": "material:text",
"properties": {
"text": "Go to screen two. Default accessibility."
}
}],
"properties": {
"onPress": [{
"_:action": "push",
"properties": {
"url": "/screen2.json"
}
}]
}
}]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment