Menu - IRobot1/ng3-vr-examples GitHub Wiki

Menu of buttons

image

Code

export interface MenuItem {
  text: string; // menu action text
  icon?: string;  // optional material icon
  keycode: string; // display keyboard short-cut. blank if none
  enabled: boolean; // when false, button is disabled
  submenu?: Array<MenuItem>; // optional sub menu
  selected: () => void;  // callback when button selected
}

Inputs

Name Type Default Description
menuitems Array empty List of menu items
width number 1 Width of menu in meters
height number <calculated> Calculated height of menu in meters
rowheight number 0.1 Height of each button in meters
rowspacing number 0.01 Space between each button in meters
margin number 0.03 Space around buttons in meters
selectable InteractiveObjects undefined Add to list of objects ray caster can test for overlap

Outputs

None

Examples

<flat-ui-menu [menuitems]="menuitems" [selectable]="selectable"></flat-ui-menu>
  menuitems: Array<MenuItem> = [
    { text: 'Insert After', icon: 'add', enabled: true, submenu: this.actionmenu, selected: () => { this.showactions = true } },
    { text: 'Delete', icon: 'delete', enabled: true, selected: () => { } },
  ]

  actionmenu: Array<MenuItem> = [
    { text: 'M Move to', icon: '', enabled: true, selected: () => { } },
    { text: 'L Line to', icon: '', enabled: true, selected: () => { } },
    { text: 'V Vertical Line to', icon: '', enabled: true, selected: () => { } },
    { text: 'H Horizontal Line to', icon: '', enabled: true, selected: () => { } },
    { text: 'C Cubic Curve to', icon: '', enabled: true, selected: () => { } },
    { text: 'Q Bezier Curve to', icon: '', enabled: true, selected: () => { } },
    { text: 'A Elliptical Arc', icon: '', enabled: true, selected: () => { } },
    { text: 'Z Close Path', icon: '', enabled: true, selected: () => { } },
  ];
⚠️ **GitHub.com Fallback** ⚠️