Keyboard Button Toggle

<tpg-keyboard-button-toggle></tpg-keyboard-button-toggle>

Keyboard Buttons are used in the on-screen keyboard component and are divided in four categories:

• Primary Keyboard Button: high emphasis, push buttons used for the actual keys of the keyboard component (letters and numbers)
• Primary Keyboard Button Toggle: high emphasis, toggle buttons used for the special function keys of the keyboard component
• Secondary Keyboard Button: low emphasis, push buttons used for the function keys of the keyboard component
• Secondary Keyboard Button Toggle: low emphasis, toggle buttons used for the function keys of the keyboard component

Examples

Button type

Use the type attribute to set the button’s type.

Component

Code

  <tpg-keyboard-button-toggle label="Primary" type="primary" />
  <tpg-keyboard-button-toggle label="Secondary" type="secondary" />

Label and icon

Use the label attribute to set the label of the button. Use the icon-template attribute (iconTemplate property) to set the icon.

The label won’t be rendered if an icon is set, but is still useful as it is what’s emitted when the keyboard button is pressed

Component

Code

  <tpg-keyboard-button-toggle class="has-placeholder-icon" label="kb1" />
  <tpg-keyboard-button-toggle label="X"/>
  <tpg-keyboard-button-toggle class="has-placeholder-icon" label="kb2" type="secondary" />
  <tpg-keyboard-button-toggle label="Z" type="secondary" />

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          // Adds placeholder icons onto primary buttons with relevant class applied
          const elements = document.querySelectorAll(
              'tpg-keyboard-button-toggle.has-placeholder-icon'
          );
          for (const elem of elements)  {
            const button = elem; // api is same for all non-icon elements
            button.iconTemplate = tpgIconPlaceholderCustom;
          }
      });
  </script>

React

  import {
      tpgIconPlaceholderCustom,
  } from "@tpg/grammar-web-icons";

  ...

  <tpg-keyboard-button-toggle iconTemplate={tpgIconPlaceholderCustom} />
  <tpg-keyboard-button-toggle label="X"/>
  <tpg-keyboard-button-toggle type="secondary" iconTemplate={tpgIconPlaceholderCustom} />
  <tpg-keyboard-button-toggle type="secondary" label="Z"/>

Fill

The keyboard button will by default hug its content. By setting the fill attribute the button will take as much space horizontally as given by its parent container.

Component

Code

  <tpg-keyboard-button-toggle fill icon-template={tpgIconPlaceholderCustom} />
  <tpg-keyboard-button-toggle fill label="X"/>

  <div  style="display: flex; gap: 8px">
      <tpg-keyboard-button-toggle fill label="X"/>
      <tpg-keyboard-button-toggle fill icon-template={tpgIconPlaceholderCustom} />
      <tpg-keyboard-button-toggle fill label="X"/>
  </div>

Disabled

The keyboard button can be disabled by setting the disabled attribute

Component

Code

  <tpg-keyboard-button-toggle disabled label="X" />

Events

The keyboard button emits a TpgInputEvent<boolean> when clicked. The value contains the opposite of the toggle button’s current toggle state.

Component

Code

  <tpg-keyboard-button-toggle class="xyz-keyboard" label="X" />
  <tpg-keyboard-button-toggle class="xyz-keyboard" label="Y" />
  <tpg-keyboard-button-toggle class="xyz-keyboard" label="Z" />
  <tpg-keyboard-button-toggle class="xyz-keyboard" label="SuperSecretKey" icon-template={tpgIconPlaceholderCustom} />

  document.addEventListener('DOMContentLoaded', ()=>{
      const buttons = document.querySelectorAll('tpg-keyboard-button-toggle.xyz-keyboard');
      for (const button of buttons) {
          button.addEventListener("tpg-click", (e) => {
              const button = e.target;
              button.selected = !button.selected
              alert("You've clicked: " + button.label)
          });
      }
  });

React

  import {
      tpgIconPlaceholderCustom,
  } from "@tpg/grammar-web-icons";

  ...

  <tpg-keyboard-button-toggle
      label="X"
      ontpg-input={(e: TpgInputEvent) => {
          const keyboardBtn = e.target as KeyboardButtonToggle;
          keyboardBtn.selected = e.value;
          alert("You've clicked: " + keyboardBtn.label);
      }}>
  />

  <tpg-keyboard-button-toggle
      label="Y"
      ontpg-click={(e: TpgClickEvent) => {
          const keyboardBtn = e.target as KeyboardButtonToggle;
          keyboardBtn.selected = e.value;
          alert("You've clicked: " + keyboardBtn.label);
      }}>
  />

  <tpg-keyboard-button-toggle
      label="Z"
      ontpg-click={(e: TpgClickEvent) => {
          const keyboardBtn = e.target as KeyboardButtonToggle;
          keyboardBtn.selected = e.value;
          alert("You've clicked: " + keyboardBtn.label);
      }}>
  />

  <tpg-keyboard-button-toggle
      label="SuperSecretKey"
      iconTemplate={tpgIconPlaceholderCustom}
      ontpg-click={(e: TpgClickEvent) => {
          const keyboardBtn = e.target as KeyboardButtonToggle;
          keyboardBtn.selected = e.value;
          alert("You've clicked: " + keyboardBtn.label);
      }}>
  />

Tables

Properties

Attribute	Property	Description	Type	Default Value
type	type	The type of button to render.	'primary' | 'secondary'	'primary'
label	label	Textual label of the button	string	''
icon-template	iconTemplate	URI-encoded SVG template for the button's icon. Supported constants are found in	IconConstant | ''	''
disabled	disabled	Flag that disables the button, just like vanilla	boolean	false
fill	fill	Flag that causes the keyboard button to fill its parent container horizontally	boolean	false
selected	selected	Defines if the button should be rendered as toggled or not. The consumer is responsible for setting this according to emitted events.	boolean	false

Events

Event name	Reactjs attribute	Description
tpg-input	ontpg-input	Event emitted when the button is triggered by click or press. The value of the event is the inverse of the current toggled state

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox