Виртуальная клавиатура

Контрол "Виртуальная клавиатура" — это набор кнопок, изображённый на экране монитора, который позволяет пользователям использовать компьютерную мышь или пальцы (если экран сенсорный) для ввода значений.

Пример
Исходный код

Документация API Спецификация Axure

Виртуальная клавиатура отображает двумерный массив элементов — items. Каждый элемент представляет кнопку клавиатуры. Оформление кнопок клавиатуры зависит от их типа:

  • input — кнопка ввода;
  • action — кнопка действия;
  • mainAction — кнопка основного действия с акцентным цветом фона.
  • accentAction — кнопка действия с акцентным цветом текста/иконки.

В следующем примере показано, как задать телефонную раскладку клавиатуры.

<!-- WML -->
<Keyboard.View
    items="{{_items}}" />
// TypeScript
import {IKeyboardItem} from 'Keyboard/View';

export default class MyControl extends Control<IControlOptions> {
    ...
    protected _items: IKeyboardItem[][] = [
        [
            {
                type: 'input',
                value: '1',
                caption: '1',
                tooltip: 'number one (1)'
            },
            {
                type: 'input',
                value: '2',
                caption: '2'
            },
            {
                type: 'input',
                value: '3',
                caption: '3'
            },
            {
                type: 'action',
                value: 'mute',
                icon: 'icon-MicrophoneOff',
                iconSize: 's'
            }
        ],
        [
            {
                type: 'input',
                value: '4',
                caption: '4'
            },
            {
                type: 'input',
                value: '5',
                caption: '5'
            },
            {
                type: 'input',
                value: '6',
                caption: '6'
            },
            {
                type: 'action',
                value: 'share',
                icon: 'icon-Publish2',
                iconSize: 's'
            }
        ],
        [
            {
                type: 'input',
                value: '7',
                caption: '7'
            },
            {
                type: 'input',
                value: '8',
                caption: '8'
            },
            {
                type: 'input',
                value: '9',
                caption: '9'
            },
            {
                type: 'action',
                value: 'hold',
                icon: 'icon-Pause',
                iconSize: 's',
                tooltip: 'hold the call to call someone else'
            }
        ],
        [
            {
                type: 'action',
                value: 'asterisk',
                caption: '*'
            },
            {
                type: 'input',
                value: '0',
                caption: '0'
            },
            {
                type: 'action',
                value: 'sharp',
                caption: '#'
            },
            {
                type: 'mainAction',
                value: 'call',
                icon: 'icon-Call',
                iconSize: 's'
            }
        ]
    ];
}

При нажатии на кнопку виртуальной клавиатуры происходит событие itemClick c объектом item, на который было произведено нажатие.

<!-- WML -->
<Keyboard.View
    ...
    on:itemClick="_keyboardClickHandler()" />
// TypeScript
protected _keyboardClickHandler(e: SyntheticEvent<MouseEvent>, item: IKeyboardItem): void {
    ...
}