Gauge
Gauge wraps the Smart UI Gauge web component, providing a circular dial display for numeric values with full XMLUI theming integration.
Behaviors
This component supports the following behaviors:
| Behavior | Properties |
|---|---|
| Animation | animation, animationOptions |
| Bookmark | bookmark, bookmarkLevel, bookmarkTitle, bookmarkOmitFromToc |
| Display When | displayWhen |
| Form Binding | bindTo, initialValue, noSubmit |
| Component Label | label, labelPosition, labelWidth, labelBreak, required, enabled, shrinkToLabel, style, readOnly |
| Tooltip | tooltip, tooltipMarkdown, tooltipOptions |
| Validation | bindTo, required, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, validationMode, verboseValidationFeedback |
| Styling Variant | variant |
Properties
analogDisplayType
default: "needle"
Display type: 'needle', 'fill', or 'line'.
animation
default: "none"
Animation type: 'none' or 'advanced'.
digitalDisplay
default: false
Show digital value display.
enabled
default: true
This boolean property value indicates whether the component responds to user events (true) or not (false).
endAngle
default: 210
End angle in degrees.
initialValue
This property sets the component's initial value.
maxValue
default: 100
Maximum value of the allowed range.
minValue
default: 0
Minimum value of the allowed range.
scalePosition
default: "inside"
Scale position: 'inside', 'outside', or 'none'.
showUnit
default: false
Whether to show the unit.
startAngle
default: -30
Start angle in degrees.
unit
default: ""
Unit text appended to values.
Events
didChange
This event is triggered when value of Gauge has changed.
Signature: didChange(newValue: any): void
newValue: The new value of the component.
Exposed Methods
focus
Sets focus on the gauge.
Signature: focus(): void
setValue
Sets the gauge value programmatically.
Signature: setValue(value: number): void
value: The new numeric value.
value
Gets the current gauge value.
Signature: get value(): number | undefined
Styling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-Gauge | $color-surface-50 | $color-surface-50 |
| backgroundColor-Gauge | $color-surface-50 | $color-surface-50 |
| primaryColor-Gauge | $color-primary | $color-primary |
| primaryColor-Gauge | $color-primary | $color-primary |
| textColor-Gauge | $textColor-primary | $textColor-primary |
| textColor-Gauge | $textColor-primary | $textColor-primary |