This widget displays a dial with a slider the user can move to change a parameter value.
When the slider is moved on the dial, the selected value is immediately sent to the remote product by updating the referenced configuration parameter.
This widget provides two different layouts you can use.
DASHED
SOLID
Configuration
code_blocksDesign View
In the template editor, you can find the Knob icon 
code_blocksCode View
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
| Knob <knob-widget> | |
|---|---|
| PROPERTIES | |
| Color | The color used to render the widget elements. Type: STRING | Optional | Default: #3F51B5 [config]="{color: 'fooBar'}" |
| CSS Class | The name(s) of the CSS class used to customize the widget layout. Type: STRING | Optional class="my-custom-class" |
| Default Value | The default value to use when displaying the widget. Type: INTEGER | Optional [config]="{defaultValue: 123}" |
| Height | The height of the widget (e.g. 250px). Type: STRING | Optional | Default: 300px [config]="{height: '250px'}" |
| Layout | The dial layout, which can be:
Type: ENUM | Optional | Values: DASHED
SOLID
[config]="{layout: 'SOLID'}" |
| Parameter | The configuration parameter whose value must be set. Type: CONFIGURATION_PARAMETER | Required [config]="{parameter: 'CONFIGURATION_PARAMETER'}" |
| Ratain Last Value | The flag indicating whether the last value should be retained between navigations. Type: BOOLEAN | Optional | Values: true
false
[config]="{retainLastValue: true}" |
| Ticks | The number of ticks within the DASHED dial. Type: INTEGER | Optional | Default: 50 [config]="{ticks: 123}" |
| Title | The title displayed on the top part of the widget box. Type: STRING | Optional [title]="'Details'" |
| Unit | The alternative unit of measurement to be displayed next to the value. Type: STRING | Optional [config]="{unit: 'fooBar'}" |
| Visibility Condition | The expression that allows you to reduce the visibility of the element. Type: STRING | Optional *ngIf="getUser().organizationId != null" |
Comments
0 comments
Please sign in to leave a comment.