1import { Button, Circle, Color, List, Navigation, NavigationLink, NavigationStack, Rectangle, Script, Section, Text, VStack, ZStack } from "scripting"
2
3function Example() {
4 const colors: Color[] = [
5 "red",
6 "orange",
7 "yellow",
8 "green",
9 "blue",
10 "purple",
11 ]
12
13 return <NavigationStack>
14 <List
15 navigationTitle={"ZStack"}
16 >
17 <Section
18 header={
19 <Text
20 textCase={null}
21 >ZStack</Text>
22 }
23 >
24 <ZStack>
25 {colors.map((color, index) =>
26 <Rectangle
27 fill={color}
28 frame={{
29 width: 100,
30 height: 100,
31 }}
32 offset={{
33 x: index * 10,
34 y: index * 10
35 }}
36 />
37 )}
38 </ZStack>
39 </Section>
40
41 <Section
42 header={
43 <Text
44 textCase={null}
45 >background</Text>
46 }
47 >
48 <Text
49 background={{
50 content: <Rectangle
51 fill={"systemBlue"}
52 frame={{
53 width: 100,
54 height: 50,
55 }}
56 />,
57 alignment: "center",
58 }}
59 >Hello Scripting!</Text>
60 </Section>
61
62 <Section
63 header={
64 <Text
65 textCase={null}
66 >overlay</Text>
67 }
68 >
69 <Circle
70 fill={"yellow"}
71 frame={{
72 width: 100,
73 height: 100,
74 }}
75 overlay={{
76 content: <Rectangle
77 fill={"blue"}
78 frame={{
79 width: 50,
80 height: 50,
81 }}
82 />,
83 alignment: "center"
84 }}
85 />
86 </Section>
87
88 <Section
89 title={"containerBackground (iOS 18.0+)"}
90 >
91 <Button
92 title={"Present"}
93 action={() => {
94 Navigation.present({
95 element: <ContainerBackgroundExample />,
96 modalPresentationStyle: "pageSheet"
97 })
98 }}
99 />
100 </Section>
101 </List>
102 </NavigationStack>
103}
104
105function ContainerBackgroundExample() {
106 const dismiss = Navigation.useDismiss()
107
108 return <NavigationStack>
109 <List
110 navigationTitle={"containerBackground"}
111 navigationBarTitleDisplayMode={"inline"}
112 toolbar={{
113 cancellationAction: <Button
114 title={"Done"}
115 action={dismiss}
116 />,
117 }}
118 >
119 <NavigationLink
120 title={"Red Page"}
121 destination={
122 <VStack
123 navigationContainerBackground={"red"}
124 frame={{
125 maxWidth: 'infinity',
126 maxHeight: 'infinity'
127 }}
128 >
129 <Text>A red page</Text>
130 </VStack>
131 }
132 />
133 <NavigationLink
134 title={"Blue Page"}
135 destination={
136 <VStack
137 navigationContainerBackground={"blue"}
138 frame={{
139 maxWidth: 'infinity',
140 maxHeight: 'infinity'
141 }}
142 >
143 <Text>A blue page</Text>
144 </VStack>
145 }
146 />
147 </List>
148 </NavigationStack>
149}
150
151async function run() {
152 await Navigation.present({
153 element: <Example />
154 })
155 Script.exit()
156}
157
158run()
