0.2.2 • Published 4 years ago

@skui/softwarekey

Licence

MIT

Version

0.2.2

Deps

Size

13 kB

Vulns

Weekly

Stars

Summary Dependency Versions

@skui/softwareKey

Index

Basic usage
Props
Handle events

Basic usage

<script lang="ts">
  import { SoftwareKey } from "@skui/softwarekey";
</script>

<SoftwareKey>
  <h5 slot="left">Options</h5>
  <h5 slot="center">Select</h5>
  <h5 slot="right">Back</h5>
</SoftwareKey>

Example

Props

Name	Type	Description
onLeftClick	(event: KeyboardEvent) => void	The function is run whenever the left key has been pressed
onRightClick	(event: KeyboardEvent) => void	The function is run whenever the right key has been pressed
onCenterClick	(event: KeyboardEvent) => void	The function is run whenever the center key has been pressed
onBackClick	(event: KeyboardEvent) => void	The function is run whenever the back key has been pressed

Handle events

You have two options of reacting to keyboard event, the first option is to change the softKeyActions context.

<script lang="ts">
  import { getContext, onMount } from "svelte";
  import type { Writable } from "svelte/store";
  import type { softwareKeyFunctions } from "@skui/types";

  const softKeyActionsWritable =
    getContext<Writable<softwareKeyFunctions>>("softKeyActions");

  onMount(() => {
    softKeyActionsWritable.update((current) => ({
      ...current,
      center: (event) => {
        console.log("Handle center button press");
      },
    }));
  });
</script>

The other options is to define the props on the component

<script lang="ts">
  import { SoftwareKey } from "@skui/softwarekey";
</script>

<SoftwareKey
  onCenterClick={(event) => {
    console.log("Handle center button press");
  }}
>
  <h5 slot="left">Options</h5>
  <h5 slot="center">Select</h5>
  <h5 slot="right">Back</h5>
</SoftwareKey>

License

MIT License