Constructor
# new Menu(config)
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> |
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>