@forter/hotkeys-map v1.4.0

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