@forter/hotkeys-map

1.4.0 • Public • Published

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

Package Sidebar

Install

npm i @forter/hotkeys-map

Weekly Downloads

3

Version

1.4.0

License

Apache-2.0

Unpacked Size

73.2 kB

Total Files

34

Last publish

Collaborators

  • oweingart
  • lirown
  • forter-npm