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.

!

Basic Usage

<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

`

- Structure

Put <msc-shortcut /> into HTML document.

`html



`

JavaScript Instantiation

<msc-shortcut /> could also use JavaScript to create DOM element. Here comes some examples.

`html

`

Style Customization

<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

...

`

Attributes

<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

...

`

Property


| Property Name | Type | Description |
| ----------- | ----------- | ----------- |
| open | Boolean | Getter <msc-shortcut />'s open state. |
| groups | Array | Setter / Getter <msc-shortcut />'s groups config. Each unit needs to contain "legend" & "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`. |

Mathods

| Mathod Signature | Description |
| ----------- | ----------- |
| click() | Simulate <msc-shortcut /> click action. |
| toggle(force) | Toggle <msc-shortcut /> open or close. （force is optional, developers could set boolean to force open or close. |

Reference

- <msc-shortcut /> demo
- WEBCOMPONENTS.ORG
- YouTube tutorial
- Popover API
- CSS anchor positioning API
- position-area
- W3C > anchor position