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.

Press the following button and take a look what can <msc-shortcut /> do ?

Trigger Size：
Gap Size：
Group Count：
Position-area：

systemPrompt
direction：

ltr

rtl

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

Structure

Put <msc-shortcut /> into HTML document.

<msc-shortcut> <script type="application/json"> { "groups": [ { "legend": "Streaming", "menu": [ { "key": "add-merchandise", "title": "Add merchandise", "content": "Add merchandise" }, { "key": "streaming-analytics", "title": "View analytics", "content": "View analytics" }, { "key": "download", "title": "Download video", "content": "Download video" } ] }, { "legend": "Lucky draw", "menu": [ { "key": "winner-list", "title": "View winners", "content": "View winners" }, { "key": "event-detail", "title": "View detail", "content": "View detail" } ] }, { "legend": "Customer care", "menu": [ { "key": "call-help", "title": "Call for help", "content": "Call for help" } ] } ] } </script> </msc-shortcut>

JavaScript Instantiation

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

Style Customization

<msc-shortcut /> uses CSS custom properties to hook its interface. That means developer could easy change it into the looks you like.

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.)

<msc-shortcut data-position-area="inline-end span-block-end"> ... </msc-shortcut>

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".

<msc-shortcut groups="[{"legend":"Streaming","menu":[{"key":"add-merchandise","title":"Add merchandise","content":"Add merchandise"}]}]"> ... </msc-shortcut>

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）