示例

1import { Gauge, List, Navigation, NavigationStack, Script, Section, Text } from "scripting"
2
3function Example() {
4
5  return <NavigationStack>
6    <List
7      navigationTitle={"Gauge"}
8      navigationBarTitleDisplayMode={"inline"}
9    >
10      <Section
11        header={
12          <Text>accessoryCircular</Text>
13        }
14      >
15        <Gauge
16          value={0.4}
17          label={<Text>0 100</Text>}
18          currentValueLabel={<Text>40%</Text>}
19          gaugeStyle={"accessoryCircular"}
20          tint={"systemGreen"}
21        />
22      </Section>
23
24      <Section
25        header={
26          <Text>accessoryCircularCapacity</Text>
27        }
28      >
29        <Gauge
30          value={0.4}
31          label={<Text>Battery Level</Text>}
32          currentValueLabel={<Text>40%</Text>}
33          gaugeStyle={"accessoryCircularCapacity"}
34        />
35      </Section>
36
37      <Section
38        header={
39          <Text>linearCapacity</Text>
40        }
41      >
42        <Gauge
43          value={0.4}
44          label={<Text>Battery Level</Text>}
45          currentValueLabel={<Text>40%</Text>}
46          gaugeStyle={"linearCapacity"}
47        />
48      </Section>
49
50      <Section
51        header={
52          <Text>accessoryLinear</Text>
53        }
54      >
55        <Gauge
56          value={0.4}
57          label={<Text>Battery Level</Text>}
58          currentValueLabel={<Text>40%</Text>}
59          gaugeStyle={"accessoryLinear"}
60        />
61      </Section>
62      <Section
63        header={
64          <Text>accessoryLinearCapacity</Text>
65        }
66      >
67        <Gauge
68          value={0.4}
69          label={<Text>Battery Level</Text>}
70          currentValueLabel={<Text>40%</Text>}
71          gaugeStyle={"accessoryLinearCapacity"}
72        />
73      </Section>
74    </List>
75  </NavigationStack>
76}
77
78async function run() {
79  await Navigation.present({
80    element: <Example />
81  })
82
83  Script.exit()
84}
85
86run()