Class

Menu

kiss.ui.Menu(config)

The Menu derives from Component.

The menu contains a list of items where each items is:

{
     text: "Do this",
     icon: "fas fa-cog", // Font awesome icon class
     iconSize: "40px", // Optional icon size
     iconColor: "#00aaee", // Optional icon color
     action: () => {} // Function to execute when the menu is clicked
}
Constructor

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:

Create the Web Component and call its init method:

const myMenu = document.createElement("a-menu").init(config)

Or use the shorthand for it:

const myMenu = createMenu({
 items: [
     "This is a title", // Simple text is considered a title
     {
         icon: "fas fa-check",
         text: "Do this",
         action: () => {...}
     },
     "-", // Menu separator
     {
         hidden: !canSeeThisEntry, // It's possible to hide a menu entry using the hidden property
         icon: "fas fa-cube",
         text: "Do that",
         action: () => {...}
     },
     "Parameters:", // Text entries are processed as section titles inside the menu
     {
         icon: "fas fa-circle",
         iconSize: "32px", // It's possible to alter the default icon size
         iconColor: "#00aaee", // It's possible to alter the default icon color
         text: "Do that",
         action: () => {...}
     }
 ]
})

myMenu.render().showAt(100, 100) // Display the menu at position 100, 100
Parameters:
Name Type Attributes Description
config object
items Array.<object> | Array.<string>

The array of menu entries

closeOnClick boolean

Set to false if the menu should not be closed after an entry is clicked. Default to true

closeOnExit boolean

Set to false if the menu should not be closed after exiting. Default to true

classModifier string <optional>

Custom class to apply to the menu and menu items

top string <optional>
left string <optional>
width string | number <optional>
maxWidth string | number <optional>
height string | number <optional>
maxHeight string | number <optional>
color string <optional>
background string <optional>
backgroundColor string <optional>
padding string <optional>
border string <optional>
borderStyle string <optional>
borderWidth string <optional>
borderColor string <optional>
borderRadius string <optional>
boxShadow string <optional>

View Source client/ui/elements/menu.js, line 55

this

Generated markup

<a-menu class="a-menu">

 <!-- For each menu item -->
 <div class="menu-item classModifier">
     <span class="menu-item-icon classModifier"></span>
     <span class="menu-item-text classModifier"></span>
 </div>

 <!-- For each menu separator -->
 <div class="menu-separator"></div>

</a-menu>

Methods

# close()

Close the menu (remove it from the DOM)

View Source client/ui/elements/menu.js, line 190