fc-hotkeys-map
An element to display all different shortcuts in the screen
Usage
<script>
import '@forter/hotkeys-map';
</script>
<fc-hotkeys-map>
<fc-hotkey keys="ctrl+a+1" description="Popup alert with ctrl+a+1" style="margin-bottom: 20px">
<fc-button onclick="alert('button with ctrl+a');">button with ctrl+a+1 hotkey</fc-button>
</fc-hotkey>
<fc-hotkey keys="ctrl+b" description="Popup alert with ctrl+b" style="margin-bottom: 20px">
<fc-button onclick="alert('button with ctrl+b');">button with ctrl+b hotkey</fc-button>
</fc-hotkey>
<fc-hotkey keys="ctrl+c" description="Popup alert with ctrl+c" style="margin-bottom: 20px">
<fc-button onclick="alert('button with ctrl+c');">button with ctrl+c hotkey</fc-button>
</fc-hotkey>
<fc-hotkey keys="ctrl+d" description="Popup alert with ctrl+d" style="margin-bottom: 20px">
<fc-button onclick="alert('button with ctrl+d');">button with ctrl+d hotkey</fc-button>
</fc-hotkey>
</fc-hotkeys-map>
Examples
<!-- Open with button -->
<div>
<fc-hotkeys-map>
<fc-button onclick="this.parentElement.opened = true;">Show shortcut</fc-button>
</fc-hotkeys-map>
<fc-hotkey keys="ctrl+a" description="Popup alert with ctrl+a" style="margin-bottom: 20px">
<fc-button onclick="alert('button with ctrl+a');">button with ctrl+a hotkey</fc-button>
</fc-hotkey>
<fc-hotkey keys="ctrl+b" description="Popup alert with ctrl+b" style="margin-bottom: 20px">
<fc-button onclick="alert('button with ctrl+b');">button with ctrl+b hotkey</fc-button>
</fc-hotkey>
<fc-hotkey keys="ctrl+c" description="Popup alert with ctrl+c" style="margin-bottom: 20px">
<fc-button onclick="alert('button with ctrl+c');">button with ctrl+c hotkey</fc-button>
</fc-hotkey>
<fc-hotkey keys="ctrl+d" description="Popup alert with ctrl+d" style="margin-bottom: 20px">
<fc-button onclick="alert('button with ctrl+d');">button with ctrl+d hotkey</fc-button>
</fc-hotkey>
</div>
Properties
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
columns |
columns |
number |
1 | Number of columns in the modal |
currentHotKey |
any |
|||
keys |
keys |
string |
Key to open the menu for shortcuts example: ctrl+m
|
|
opened |
opened |
boolean |
If the modal is opened |