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?
最后更新于