furo-ui5-context-menu

furo-ui5-context-menu #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-context-menu.js';
exports FuroUi5ContextMenu js
exports <furo-ui5-context-menu> custom-element-definition
superclass LitElement
mixes FBP

Summary: Context menu

Description #

furo-ui5-context-menu is a context menu or menu element.

A furo-ui5-context-menu-display element must be inserted in one of the parent elements of the element where you use the furo-ui5-context-menu. The app-shell or even body is a good place for that.

furo-ui5-context-menu uses diplay:inline, do not forget to change it to display:block if you place it around a block level element.

1
2
3

 <furo-ui5-context-menu  fn-trigger="--menuClkd" fn-bind-data="--menuObject" at-menu-item-selected="--menuItem">
     <ui5-icon name="menu" at-click="--menuClkd"></ui5-icon>
 </furo-ui5-context-menu>

Data signature # 

1
2
3
4
5
6
7
8

- type: 'menu.Menuitem #Item signature for a context menu'
 fields:
   icon: 'string:1 #Leading icon of the menu'
   display_name: 'string:2 #String representation of the menu item. Menu item text'
   disabled: 'bool:3 #Display actions as disabled when they can only be used sometimes and under certain conditions.'
   command: 'string:4 #Keyboard command hint'
   leading_divider: 'bool:5 #Item has a leading divider line'
   children: '[] menu.Menuitem:6 #Children of this item'

Minimal data signature # 

1
2
3
4

- type: 'menu.Menuitem #Item signature for a context menu'
 fields:
   id: 'string:1 #Id of the menu item'
   display_name: 'string:2 #String representation of the menu item. Menu item text'

Example #

Note The demo is a little bit broken, because of the scrolling position of the documentation system. Scroll up to see the menu after you opened it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<body>
  <!-- The display must be placed in a parent element -->
  <furo-ui5-context-menu-display></furo-ui5-context-menu-display>
  <main>
    <div>
      <article>
        <furo-ui5-context-menu
          fn-trigger="--menuClkd"
          fn-bind-data="--menuDO"
          @-menu-item-selected="--menuItemSelected"
        ><ui5-icon name="meal" @-click="--menuClkd">open menu</ui5-icon>
        </furo-ui5-context-menu>
      </article>
    </div>
  </main>

Attributes and Properties #

Events #

at-menu-item-selected → {context, menuitem}

Fired when a menu item is selected.

Methods #

bindData #

bindData(menu `` ** Fieldnode ) ⟹ void

`` Fieldnode → fn-bind-data

Bind your menu object.

  • menu
  • || RepeaterNode} menu with menu.Menuitem signature

setContext #

setContext(ctx * ) ⟹ void

* → fn-set-context

Sets the context. Use this if you want to set a Object as context

  • ctx Can be anything, will be returned at the menu-item-selected method

trigger #

trigger(byKeyboard `` ) ⟹ void

`` → fn-trigger

Triggers the context menu. Set by keyboard to true to focus the first element for keyboard navigation

  • byKeyboard

triggerContext #

triggerContext(context Object byKeyboard `` ) ⟹ void

Object `` → fn-trigger-context

triggers the menu with context

  • context
  • byKeyboard

Slots #

default #

Type: HTMLElement

default slot to add an individual context menu opener component (e.g. furo-icon-button).