@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>

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

Copyright (c) 2021 Wouter van der Wal