FSubmenu

This is the builder for add a menu that can contains submenus to Univer. You shall never construct this class by yourself. Instead, call createSubmenu of FUniver to create a instance.

Please notice that until the appendTo method is called, the menu item is not added to the UI.

createSubmenu() accepts order and gridLayout for the submenu's Ribbon trigger. These options do not change the layout of the popup's children. See IFacadeSubmenuItem. To update an existing menu, use FUniver.updateMenuConfig().

Access

Access through:

FUniver.createSubmenu()

Setup

Register @univerjs/ui or a preset that includes it. In plugin mode, import @univerjs/ui/facade. Additional methods below require their listed plugin packages. See Facade setup.

`@univerjs/ui`

`FSubmenu.addSeparator`

Add a separator to the submenu.

TypeScript

addSeparator(): this

Returns

The FSubmenu itself for chaining calls.

Examples

TypeScript

// Create two leaf menus.const menu1 = univerAPI.createMenu({  id: 'submenu-nested-1',  title: 'Item 1',  action: () => {    console.log('Item 1 clicked')  },})const menu2 = univerAPI.createMenu({  id: 'submenu-nested-2',  title: 'Item 2',  action: () => {    console.log('Item 2 clicked')  },})// Add the leaf menus to a submenu and add a separator between them.// Append the submenu to the `contextMenu.others` section.univerAPI  .createSubmenu({ id: 'submenu-nested', title: 'Nested Submenu' })  .addSubmenu(menu1)  .addSeparator()  .addSubmenu(menu2)  .appendTo('contextMenu.others')

Package: @univerjs/ui · Type definitions

`FSubmenu.addSubmenu`

Add a menu to the submenu. It can be a FMenu or a FSubmenu.

TypeScript

addSubmenu(submenu: FMenu | FSubmenu): this

Parameters

submenu — Required. Menu to add to the submenu.

Returns

The FSubmenu itself for chaining calls.

Examples

TypeScript

// Create two leaf menus.const menu1 = univerAPI.createMenu({  id: 'submenu-nested-1',  title: 'Item 1',  action: () => {    console.log('Item 1 clicked')  },})const menu2 = univerAPI.createMenu({  id: 'submenu-nested-2',  title: 'Item 2',  action: () => {    console.log('Item 2 clicked')  },})// Add the leaf menus to a submenu.const submenu = univerAPI  .createSubmenu({ id: 'submenu-nested', title: 'Nested Submenu' })  .addSubmenu(menu1)  .addSeparator()  .addSubmenu(menu2)// Create a root submenu append to the `contextMenu.others` section.univerAPI  .createSubmenu({ id: 'custom-submenu', title: 'Custom Submenu' })  .addSubmenu(submenu)  .appendTo('contextMenu.others')

Types: FMenu · FSubmenu

Package: @univerjs/ui · Type definitions

`FSubmenu.appendTo`

Append the menu to any menu position on Univer UI.

TypeScript

appendTo(path: string | string[]): void

Parameters

path — Required. Some predefined path to append the menu. The paths can be an array, or an array joined by | separator. Since lots of submenus reuse the same name, you may need to specify their parent menus as well.

Examples

TypeScript

// This menu item will appear on every `contextMenu.others` section.univerAPI  .createMenu({    id: 'custom-menu-id-1',    title: 'Custom Menu 1',    action: () => {      console.log('Custom Menu 1 clicked')    },  })  .appendTo('contextMenu.others')// This menu item will only appear on the `contextMenu.others` section on the main area.univerAPI  .createMenu({    id: 'custom-menu-id-2',    title: 'Custom Menu 2',    action: () => {      console.log('Custom Menu 2 clicked')    },  })  .appendTo(['contextMenu.mainArea', 'contextMenu.others'])

Package: @univerjs/ui · Type definitions

How is this guide?