Skip to main content

options

Description​

Optional. Specifies a set of options for Action Menu

Usage​

options?: {
  id?: string | number;
  text?: string;
  subtext?: string;
  handler?: (ev: IMenuOptionClick) => void;
  data?: IMenuOption[];
  css?: string;
  icon?: string;
  type?: string | React.ComponentType<any>; // @deprecated use `comp` instead. Will be removed in v3.0 
  comp?: string | React.ComponentType<any>;
}[];

Parameters​

A menu item object in the options array may contain a set of properties. The list of available properties is given below:

  • id - (optional) the id of a menu item
  • text - (optional) the text of a menu item
  • subtext - (optional) a dimmed text displayed to the right of the main item's text, such as a hot key or other additional info
  • icon - (optional) the name of an icon displayed before the text. It converts to adding <i class={item.icon}>, so any icons with the wxi- prefix can be used here, e.g ".wxi-plus" or any customer icons defined on the page. Read more about the usage of icons
  • css- (optional) the name of a CSS class that will be applied to an item
  • type - (optional) the type of an item. It can be a predefined string such as "separator" or a custom React component to render a menu item in place of the default renderer. Will be removed in SVAR 3.0 so use comp instead
  • data - (optional) an array of sub items for a menu item. Used to create a tree-like menu structure; the same as options
  • handler - (optional) a click handler function for the menu item. It receives an object with the parameters described here: onclick
  • comp - (optional) the component used to render the menu item. It can be the name of a built-in component (string) or a custom React component reference

Example​

import { useState } from "react";

function Example() {
  const [message, setMessage] = useState("");

  const options = [
    {
      text: "Cut",
      icon: "wxi wxi-content-cut",
      handler: ({ item }) => setMessage(`cut ${item}`),
    },
    {
      text: "Copy",
      icon: "wxi wxi-content-copy",
      handler: ({ item }) => setMessage(`copy ${item}`),
    },
    {
      text: "Paste",
      icon: "wxi wxi-content-paste",
      handler: ({ item }) => setMessage(`paste ${item}`),
    },
  ];

  return (
    <>
      <ActionMenu options={options} />
      <div>{message}</div>
    </>
  );
}

Details​

Properties of an item object​

A menu item object in the options array may contain a set of properties. The list of available properties is given below:

  • id - the id of a menu item
  • text - the text of a menu item
  • subtext - a dimmed text displayed to the right of the main item's text, such as a hot key or other additional info
  • icon - the name of an icon displayed before the text. It converts to adding <i class={item.icon}>, so any icons with the wxi- prefix can be used here, e.g ".wxi-plus" or any customer icons defined on the page. Read more about the usage of icons
  • css - the name of a CSS class that will be applied to an item
  • type - the type of an item. It can be a "separator" or a custom type registered as a menu item (e.g. type:"button)
  • data - an array of sub items for a menu item. Used to create a tree-like menu structure
  • handler - a click handler function, takes an item object as a parameter

Related article: Loading options

Related sample: Custom Area