<msc-shortcut /> is a menu component which based on Popover API & CSS anchor positioning API. That means shortcut will be top-layer with well controlled position. Besides that, there will be 16 kinds of position-area for developers to setup shortcut displ
npm install msc-shortcut 
<msc-shortcut /> is a menu component which based on Popover API & CSS anchor positioning API. That means shortcut will be top-layer with well controlled position. Besides that, there will be 20 kinds of position-area for developers to setup shortcut display position.
<msc-shortcut /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-shortcut />'s html structure and everything will be all set.
- Required Script
``html`
type="module"
src="https://unpkg.com/msc-shortcut/mjs/wc-msc-shortcut.js">
- Structure
Put <msc-shortcut /> into HTML document.
`html`
<msc-shortcut /> could also use JavaScript to create DOM element. Here comes some examples.
`html`
<msc-shortcut /> uses CSS custom properties to hook its interface. That means developer could easy change it into the looks you like.
`html`
Otherwise delevelopers could also add attribute - data-position-area to change shortcut display position. Default is "inline-end span-block-end". (logical properties support only, view all position-area)
`html`
...
<msc-shortcut /> supports some attributes to let it become more convenience & useful.
- groups
Set groups config. This should be array string. Each unit needs to contain "legend" & "menu".
legend:Set each group's legend.\menu:Set each group's menu. This should be array string. Each unit needs to contain "key"、"title" & "content".
`html`
...
" & "menu". |Events
| Event Signature | Description |
| ----------- | ----------- |
| msc-shortcut-click | Fired when <msc-shortcut /> clicked. Developers could gather menu information through event.detail. |
| msc-shortcut-toggle | Fired before <msc-shortcut /> is open or closed. Developers could gather state information through event.detail`. |