OneScript
UI

概览

导航栈、标签栏、工具栏与导航标题。

导航相关 API 从 onescript/views 导入,可在 App 与 Action 视图中使用,Widget 不支持。

API用途
NavigationStack根据 path 压入和弹出页面。
NavigationLink向所在导航栈压入一个值。
TabView使用底部标签栏在多个页面之间切换。
toolbar在导航栏或底部栏放置 ToolbarItem、ToolbarItemGroup 和 ToolbarSpacer。
navigationTitle设置页面标题及标题显示模式的修饰符。

app.show() 展示的视图始终带有导航栏,关闭和控制台按钮固定在根页面上。根视图不是 NavigationStack 或 TabView 时,OneScript 会自动包一层导航栈,并以项目名称作为标题。

import { app } from "onescript"
import {
  Button, Modifier, NavigationLink, NavigationStack, Symbol, Text, ToolbarItem, VStack,
} from "onescript/views"

await app.show(
  <NavigationStack destination={(id: string) => <Text>条目 {id}</Text>}>
    <VStack
      spacing={12}
      modifier={Modifier
        .navigationTitle("收件箱")
        .toolbar(
          <ToolbarItem placement="topBarTrailing">
            <Button action={() => console.log("compose")}>
              <Symbol name="square.and.pencil" />
            </Button>
          </ToolbarItem>
        )}
    >
      <NavigationLink value="1">打开条目 1</NavigationLink>
      <NavigationLink value="2">打开条目 2</NavigationLink>
    </VStack>
  </NavigationStack>
)

How is this guide?

最后更新于