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 ?
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.
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-positionarea
to change shortcut display position. Default is "right span-bottom". (view all position-area)
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".
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) |