Keypad

The <ch5-keypad> component is a flexible numeric keypad that always displays numbers 0 through 9 (along with the * and # symbols) like a standard telephone. The keypad also supports custom button labels.

For interactive examples using the <ch5-keypad> component and CSS classes, refer to the Showcase Application.

Features

The <ch5-keypad> attributes provide the following features:

  • Applies button, label, receiveStateEnable, and receiveStateShow values to the keypad based on a defined contract.
  • Sets the keypad button type (default, info, text, danger, warning, success, primary, secondary).
  • Sets the shape of the buttons within the keypad.
  • Sets the overall keypad shape to a rounded rectangle, rectangle, or circle.
  • Sets stretch properties of the keypad relative to its container.
  • Allows individual keypad buttons to be hidden.
  • Determines whether an extra button is shown on the keypad (such as a dialer icon).
  • Sets the orientation of button labels in respect to sublabels.
  • Determines whether the values received from the contract enable the keypad and its buttons.
  • Determines whether the values received from the contract will show or hide the keypad.
  • Determines whether the contract will show the extra button on the keypad (takes precedence over the local settings).
  • Sends signals to the control system on click or tap events.