Keyboard

<tpg-keyboard></tpg-keyboard>

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

Default

The keyboard will by default do nothing but emit the name of the key that has been pressed.

With some buttons it will emit the action name shift, hide, switchToNum.

If you open the console and click on one of the keys, you will be able to see the name of the key.

Component

Code

  <tpg-keyboard />

States

You can change the current layout using the currentState property along with one of these values: qwerty | num | sym.

You can also choose whether to display large letters using the capsEnabled property.

The keyboard will emit switchToQwerty | switchToNum | switchToSym as well as shift when the relevant buttons are pressed. The currentState and capsEnabled properties will automatically be updated whenn this happens. You can turn off this behavior by setting the autoUpdate property to false.

Component

With auto update:

Code

  <tpg-keyboard />

Tables

Properties

Attribute	Property	Description	Type	Default Value
current-state	currentState	Determines which keyboard layout to render	'qwerty' | 'num' | 'sym'	'qwerty'
caps-enabled	capsEnabled	Whether or not the keys in qwerty state should be rendered in uppercase	boolean	false
auto-update	autoUpdate	capsEnabled and currentState will automatically be updated when correct keys are pressed if set to true.	boolean	true

Events

Event name	Reactjs attribute	Description
tpg-input	ontpg-input	Event emitted whenever a key is pressed. Contains the key's value "a", "b", "shift", "backspace", "switchToQwerty" ...

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox