@ewc-lib/ewc-menu
v0.1.7-alpha
Published
Downloads
11
Keywords
Readme
Screenshot
API
There are the following properties:
- data - set contents of the menu. expects a map, key=main-menu item, value=[array of sub-menu items]. see example below.
- select - sets currently selected item. expects a key of the map or the id of a sub-menu.
- onSelect - a callback which is called when a menu/submenu item was selected
- callback signature: myCallback(subMenuId, menuId, isMainMenuItem)
- isMainMenuItem === true means, main-menu item was selected
- Note: subMenuId === menuId in that case
- isMainMenuItem === true means, main-menu item was selected
- callback signature: myCallback(subMenuId, menuId, isMainMenuItem)
Note: Any menu-item-id === name/text of the item.
Usage with WebPack
package.json
"dependencies": {
"@ewc-lib/ewc-menu": "latest"
}webpack.config.js
...
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader'
]
}
]
}index.html
<body>
<ewc-menu></ewc-menu>
<script>
document.addEventListener('DOMContentLoaded', function () {
const el = document.getElementsByTagName("ewc-menu")[0]
const d = new Map()
d.set("FILE", ["Open","Save","Close"])
d.set("EDIT", ["Copy","Cut","Paste"])
d.set("HELP", ["Help","About"])
el.data = d
el.onSelect = (subMenuId, menuId, isMainMenuItem) =>
alert(`Menu selection: ${menuId} ${subMenuId}\nWas a main menu item selected? -> ${isMainMenuItem}`)
el.select = "Cut"
})
</script>
</body>main.js
import "@ewc-lib/ewc-menu"