Knob

The knob is a type of control component, supporting the customization of the size and color of the knob and its dial, and addition of multiple knob components in the large screen. It is usually used to display the device control. This document introduces the meaning of each configuration item of the knob component, to help you use the knob component quickly and accurately.

Configuration

• Basic settings

  • width: component width in the editor

  • height: component height in the editor

  • top: distance between the component and the top of editor

  • left: distance between the component and the left side of editor

• Control:

  • Dial maximum: maximum value of rotation

  • Dial minimum: minimum value of rotation

• Turntable:

  • Turntable width: width of the circular track where the knob rotates

  • Turntable background color: color of the circular track where the knob rotates

  • Color of rotation area: track color after knob rotation

• Knob:

  • Display: control the knob display

  • Radius: control the knob size. The greater the radius, the larger the knob is.

  • Color: color of the knob, supporting color values in hex, rgb and rgba formats

• Middle font:

  • Display: control the knob display Default: true

  • Font size: font size in the middle of knob, 16px by default

  • Color: color of the font in the middle of the knob, supporting color values in hex, rgb and rgba formats

  • Font: font in the middle of knob

  • Font weight: font weight in the middle of knob

Data

return [{
    value: 20,
    max: 100,
    min:  0
}]

• value: specific value of knob display

• min: minimum value of knob control

• max: maximum value of knob control