Menu Control Docs

Overview

The Menu control allows hierarchal organization of elements associated with commands. It can be used to implement main and context menu of an application.

Screenshot

Getting Started

  1. Create Canvas
  2. Add MenuButton.prefab from Assets/Battelhub/UIControls/Menu/Prefabs to hierarchy.
  3. Add Menu.prefab from Assets/Battelhub/UIControls/Menu/Prefabs to hierarchy

  4. Set Menu field of the Menu Button:

    Screenshot

  5. Create Empty Game Object and name it Command Handler

  6. Create MenuCmdHandler script and add it to the Command Handler:

    using UnityEngine;
using Battlehub.UIControls.MenuControl;

public class MenuCmdHandler : MonoBehaviour
{
    public void OnValidateCmd(MenuItemValidationArgs args)
    {
        Debug.Log("Validate Command: " + args.Command);

        if(args.Command == "Item Cmd")
        {
            args.IsValid = false;
        }
    }

    public void OnCmd(string cmd)
    {
        Debug.Log("Run Cmd: " + cmd);
    }
}

  7. Set Action and Validate event handlers of each entry in Items array of the Menu:

    Screenshot

  8. Hit Play, open the Menu and click Child Item. You should see following output:

    Screenshot

Structure:

Screenshot

Prefab: Assets/Battelhub/UIControls/Menu/Prefabs/MenuItem.prefab
Script: Assets/Battelhub/UIControls/Menu/Scripts/MenuItem.cs

Fields:

  • Selection Color - highlighted color.
  • Text Color - text color.
  • Disabled Selection Color - highlighted color of disabled menu item.
  • Disabled Text Color - text color of disabled menu item.
  • Icon - image.
  • Text - text.
  • Expander - image visible if menu item has sub-menu.
  • Selection - image visible when pointer is over menu item.

Structure:

Screenshot

Prefab: Assets/Battelhub/UIControls/Menu/Prefabs/Menu.prefab
Script: Assets/Battelhub/UIControls/Menu/Scripts/Menu.cs

Fields:

  • Items - array of Menu Item Info.
  • Menu Item Prefab - reference to menu item prefab.
  • Anchor - opened menu will be aligned with anchor.
  • Panel - parent of menu items.
  • Canvas Group - required to "fade-in" menu.
  • Fade in speed - how much the alpha property changes per second.
[Serializable]
public class MenuItemInfo
{
    public string Path; //path to menu item e.g. Create/3DObject/Cube
    public string Text; //menu item text 
    public Sprite Icon; //menu item icon

    public string Command; //argument passed to Action event handler and Validate event handler
    public MenuItemEvent Action; //raised when menu item clicked
    public MenuItemValidationEvent Validate; //event raised when menu opened
}

This button can be used to open menu. It has three states: normal, pointer over and focused. The transition to the focused state occurs when the menu is opened. The transition to the normal state occurs when the menu is closed.

Prefab: Assets/Battelhub/UIControls/Menu/Prefabs/MenuButton.prefab
Script: Assets/Battelhub/UIControls/Menu/Scripts/MenuButton.cs

Context Menu Trigger

This script opens the menu when you click the right mouse button.

Screenshot

Script: Assets/Battelhub/UIControls/Menu/Scripts/СontextMenuTrigger.cs

Screenshot