Menu

A button that opens a menu. label is the button and children are the menu items: Button, Divider, Section, Picker, Toggle, or another Menu for a submenu. Use a Label inside a Button to show an icon next to the item.

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

<Menu label={<Label symbol="ellipsis.circle">More</Label>}>
  <Button action={duplicate}>
    <Label symbol="plus.square.on.square">Duplicate</Label>
  </Button>
  <Menu label="Export">
    <Button action={exportPDF}>PDF</Button>
    <Button action={exportPNG}>PNG</Button>
  </Menu>
  <Divider />
  <Button
    role="destructive"
    action={remove}
  >
    <Label symbol="trash">Delete</Label>
  </Button>
</Menu>

Prop	Type	Description
`label`	`ViewChild`	The menu button, usually text or a Label.
`primaryAction`	`() => void \| Promise<void>`	When set, a tap runs this action and a long press opens the menu.
`children`	`ViewChild`	The menu items.

Pickers and sections

A Picker inside a Menu shows its options inline as checkmarked items. iOS does not show a title for an inline Picker, even when it is wrapped in a Section. To give the options a title, use pickerStyle("menu"): the Picker becomes a submenu named after its label.

Section titles show for other items, such as Buttons and Toggles.

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

<Menu label="View options">
  <Picker
    selection={order}
    onSelectionChange={setOrder}
    label="Sort by"
    modifier={Modifier.pickerStyle("menu")}
  >
    <Text modifier={Modifier.tag("name")}>Name</Text>
    <Text modifier={Modifier.tag("date")}>Date</Text>
  </Picker>
  <Section header="Display">
    <Toggle
      isOn={showHidden}
      onChange={setShowHidden}
    >
      Show hidden files
    </Toggle>
  </Section>
</Menu>

buttonStyle changes how the menu button looks. Also accepts Modifiers. It is only available in App and Action view sessions; widgets reject it with an unsupported view type error.

Pickers and sections

On this page