Menu

点按后展开菜单的按钮。label 是按钮本身，children 是菜单项：Button、Divider、Section、Picker、Toggle，或者作为子菜单的另一个 Menu。在 Button 中放 Label，菜单项会带上图标。

import { Button, Divider, Label, Menu } from "onescript/views"

<Menu label={<Label symbol="ellipsis.circle">更多</Label>}>
  <Button action={duplicate}>
    <Label symbol="plus.square.on.square">复制</Label>
  </Button>
  <Menu label="导出">
    <Button action={exportPDF}>PDF</Button>
    <Button action={exportPNG}>PNG</Button>
  </Menu>
  <Divider />
  <Button
    role="destructive"
    action={remove}
  >
    <Label symbol="trash">删除</Label>
  </Button>
</Menu>

Prop	Type	说明
`label`	`ViewChild`	菜单按钮，通常是文本或 Label。
`primaryAction`	`() => void \| Promise<void>`	提供后，轻点执行该操作，长按才展开菜单。
`children`	`ViewChild`	菜单项。

选择器与分组

放在 Menu 中的 Picker 会把选项直接展开为带勾选标记的菜单项。iOS 不会为这种直接展开的 Picker 显示标题，即使外面包了 Section 也一样。如果需要标题，请使用 pickerStyle("menu")：Picker 会变成以 label 命名的子菜单。

其他菜单项（例如 Button、Toggle）外面的 Section 标题可以正常显示。

import { Menu, Modifier, Picker, Section, Text, Toggle } from "onescript/views"

<Menu label="显示选项">
  <Picker
    selection={order}
    onSelectionChange={setOrder}
    label="排序方式"
    modifier={Modifier.pickerStyle("menu")}
  >
    <Text modifier={Modifier.tag("name")}>名称</Text>
    <Text modifier={Modifier.tag("date")}>日期</Text>
  </Picker>
  <Section header="显示">
    <Toggle
      isOn={showHidden}
      onChange={setShowHidden}
    >
      显示隐藏文件
    </Toggle>
  </Section>
</Menu>

buttonStyle 可以改变菜单按钮的外观。也支持修饰符。仅在 App 和 Action 视图会话中可用；在 Widget 中使用会报「不支持的视图类型」错误。

选择器与分组

本页目录