1import { Divider, ForEach, Grid, GridRow, Image, List, Navigation, NavigationStack, Rectangle, Script, Section, Text, Toggle, useState, VStack } from "scripting"
2
3function Example() {
4 const [gridCellUnsizedAxes, setGridCellUnsizedAxes] = useState(false)
5
6 return <NavigationStack>
7 <List
8 navigationTitle={"Grid"}
9 navigationBarTitleDisplayMode={"inline"}
10 >
11 <Section
12 header={
13 <Text>Grid</Text>
14 }
15 >
16 <Grid>
17 <GridRow>
18 <Text>Hello</Text>
19 <Image systemName={"globe"} />
20 </GridRow>
21 <GridRow>
22 <Image systemName={"hand.wave"} />
23 <Text>World</Text>
24 </GridRow>
25 </Grid>
26 </Section>
27
28 <Section
29 header={<Text>Grid Divider</Text>}
30 >
31 <VStack>
32 <Toggle
33 title={"gridCellUnsizedAxes"}
34 value={gridCellUnsizedAxes}
35 onChanged={setGridCellUnsizedAxes}
36 />
37 <Grid>
38 <GridRow>
39 <Text>Hello</Text>
40 <Image systemName={"globe"} />
41 </GridRow>
42 <Divider
43 gridCellUnsizedAxes={gridCellUnsizedAxes
44 ? 'horizontal'
45 : undefined}
46 />
47 <GridRow>
48 <Image systemName={"hand.wave"} />
49 <Text>World</Text>
50 </GridRow>
51 </Grid>
52 </VStack>
53 </Section>
54
55 <Section
56 header={
57 <Text>Column count, cell spacing, alignment</Text>
58 }
59 >
60 <Grid
61 alignment={"bottom"}
62 verticalSpacing={1}
63 horizontalSpacing={1}
64 >
65 <GridRow>
66 <Text>Row 1</Text>
67 <ForEach
68 count={2}
69 itemBuilder={index =>
70 <Rectangle
71 fill={"red"}
72 key={index.toString()}
73 />
74 }
75 />
76 </GridRow>
77 <GridRow>
78 <Text>Row 2</Text>
79 <ForEach
80 count={5}
81 itemBuilder={index =>
82 <Rectangle
83 fill={"green"}
84 key={index.toString()}
85 />
86 }
87 />
88 </GridRow>
89 <GridRow>
90 <Text>Row 3</Text>
91 <ForEach
92 count={5}
93 itemBuilder={index =>
94 <Rectangle
95 fill={"blue"}
96 key={index.toString()}
97 />
98 }
99 />
100 </GridRow>
101 </Grid>
102 </Section>
103 </List>
104 </NavigationStack>
105}
106
107async function run() {
108 await Navigation.present({
109 element: <Example />
110 })
111 Script.exit()
112}
113
114run()
