Usage
Signature:
interface RatingGaugeElement
Typescript Import Format
//To typecheck the element APIs, import as below.
import { RatingGaugeElement } from "ojs/ojgauge";
//For the transpiled javascript to load the element's module, import as below
import "ojs/ojgauge";
For additional information visit:
Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.
Styling
-
CSS Variables
-
Hovered
-
Unselected
-
Selected
-
Changed
-
Selected and disabled
-
Unselected and disabled
-
Selected and readonly
-
Unselected and readonly
Name | Type | Description |
---|---|---|
--oj-rating-gauge-sm-size |
<length> | Rating gauge small size |
--oj-rating-gauge-md-size |
<length> | Rating gauge medium size |
--oj-rating-gauge-lg-size |
<length> | Rating gauge large size |
Name | Type | Description |
---|---|---|
--oj-rating-gauge-border-color-hover |
<color> | Rating gauge border color when hovered |
--oj-rating-gauge-color-hover |
<color> | Rating gauge color when hovered |
Name | Type | Description |
---|---|---|
--oj-rating-gauge-border-color-unselected |
<color> | Rating gauge border color when unselected |
--oj-rating-gauge-color-unselected |
<color> | Rating gauge color when unselected |
Name | Type | Description |
---|---|---|
--oj-rating-gauge-border-color-selected |
<color> | Rating gauge border color when selected |
--oj-rating-gauge-color-selected |
<color> | Rating gauge color when selected |
Name | Type | Description |
---|---|---|
--oj-rating-gauge-border-color-changed |
<color> | Rating gauge border color when changed |
--oj-rating-gauge-color-changed |
<color> | Rating gauge color when changed |
Name | Type | Description |
---|---|---|
--oj-rating-gauge-color-selected-disabled |
<color> | Rating gauge color when selected and disabled |
Name | Type | Description |
---|---|---|
--oj-rating-gauge-color-unselected-disabled |
<color> | Rating gauge color when unselected and disabled |
Name | Type | Description |
---|---|---|
--oj-rating-gauge-color-selected-readonly |
<color> | Rating gauge color when selected and readonly |
--oj-rating-gauge-border-color-selected-readonly |
<color> | Rating gauge border color when selected and readonly |
Name | Type | Description |
---|---|---|
--oj-rating-gauge-color-unselected-readonly |
<color> | Rating gauge color when unselected and readonly |
--oj-rating-gauge-border-color-unselected-readonly |
<color> | Rating gauge border color when unselected and readonly |
Slots
JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.
-
contextMenu
-
The contextMenu slot is set on the
oj-menu
within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.
To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details.
Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.
- Deprecated:
-
Since Description 13.0.0
This web component no longer supports launching a context menu.
-
tooltipTemplate
-
The
tooltipTemplate
slot is used to specify custom tooltip content. This slot takes precedence over the tooltip.renderer property if specified.When the template is executed, the component's binding context is extended with the following properties:
- $current - an object that contains information for the gauge. (See oj.ojRatingGauge.TooltipContext or the table below for a list of properties available on $current)
Attributes
-
changed :boolean
-
Whether there has been a value entered by the user.
- Default Value:
false
- Supports writeback:
true
Names
Item Name Property changed
Property change event changedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-changed-changed
-
changed-state :Object
-
The changed shape for the gauge. Displayed after the user has set a value, or when the changed attribute of the data object is set to true.
Names
Item Name Property changedState
Property change event changedStateChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-changed-state-changed
-
(nullable) changed-state.border-color :string
-
The border color for changed state. Does not apply if a custom image is specified. The default value comes from the CSS and varies based on theme.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
- Default Value:
""
Names
Item Name Property changedState.borderColor
-
(nullable) changed-state.color :string
-
The color for changed state. Does not apply if a custom image is specified. The default value comes from the CSS and varies based on theme.
Names
Item Name Property changedState.color
-
(nullable) changed-state.shape :"circle"|"diamond"|"human"|"square"|"star"|"triangle"|string
-
The shape to be used. Can take the name of a built-in shape or the SVG path commands for a custom shape. Does not apply if a custom image is specified.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
- Default Value:
"star"
Names
Item Name Property changedState.shape
-
(nullable) changed-state.source :string
-
The URI of the custom image. If specified, it takes precedence over shape. For SVG images, the width and height must be defined on the SVG element as pixels.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
- Default Value:
""
Names
Item Name Property changedState.source
-
(nullable) changed-state.svg-class-name :string
-
The CSS style class to apply to the changed state. The style class and inline style will override any other styling specified through the properties. Does not apply if custom image is specified.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
- Default Value:
""
Names
Item Name Property changedState.svgClassName
-
changed-state.svg-style :Partial<CSSStyleDeclaration>
-
The inline style to apply to the changed state. The style class and inline style will override any other styling specified through the properties. Does not apply if custom image is specified. Only SVG CSS style properties are supported.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
- Default Value:
{}
Names
Item Name Property changedState.svgStyle
-
described-by :string|null
-
It is used to establish a relationship between this component and another element. Typically this is not used by the application developer, but by the oj-label custom element's code. One use case is where the oj-label custom element code writes described-by on its form component for accessibility reasons. To facilitate correct screen reader behavior, the described-by attribute is copied to the aria-describedby attribute on the component's dom element.
Names
Item Name Property describedBy
Property change event describedByChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-described-by-changed
-
disabled :boolean
-
Defines whether the gauge is disabled or not. User interaction is prevented if set to
true
. Visual indication will not be present when custom image source is used. Other state specificsvg-class-name
andsvg-style
will be overridden by disabled default style.- Default Value:
false
Names
Item Name Property disabled
Property change event disabledChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-disabled-changed
-
hover-state :Object
-
The shape that displays on hover.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
Names
Item Name Property hoverState
Property change event hoverStateChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hover-state-changed
-
(nullable) hover-state.border-color :string
-
The border color for hover state. Does not apply if a custom image is specified. The default value comes from the CSS and varies based on theme.
- Default Value:
""
Names
Item Name Property hoverState.borderColor
-
(nullable) hover-state.color :string
-
The color for hover state. Does not apply if a custom image is specified. The default value comes from the CSS and varies based on theme.
Names
Item Name Property hoverState.color
-
(nullable) hover-state.shape :"circle"|"diamond"|"human"|"square"|"star"|"triangle"|string
-
The shape to be used. Can take the name of a built-in shape or the SVG path commands for a custom shape. Does not apply if a custom image is specified.
- Default Value:
"star"
Names
Item Name Property hoverState.shape
-
(nullable) hover-state.source :string
-
The URI of the custom image. If specified, it takes precedence over shape. For SVG images, the width and height must be defined on the SVG element as pixels.
- Default Value:
""
Names
Item Name Property hoverState.source
-
(nullable) hover-state.svg-class-name :string
-
The CSS style class to apply to the hover state. The style class and inline style will override any other styling specified through the properties. Does not apply if custom image is specified.
- Default Value:
""
Names
Item Name Property hoverState.svgClassName
-
hover-state.svg-style :Partial<CSSStyleDeclaration>
-
The inline style to apply to the hover state. The style class and inline style will override any other styling specified through the properties. Does not apply if custom image is specified. Only SVG CSS style properties are supported.
- Default Value:
{}
Names
Item Name Property hoverState.svgStyle
-
labelled-by :string|null
-
It is used to establish a relationship between this component and another element. A common use is to tie the oj-label and the oj-rating-gauge together for accessibility. The oj-label custom element has an id, and you use the labelled-by attribute to tie the two components together to facilitate correct screen reader behavior.
Names
Item Name Property labelledBy
Property change event labelledByChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-labelled-by-changed
-
max :number
-
Integer value specifying the maximum value of the gauge, which determines the number of shapes or images that are displayed.
- Default Value:
5
Names
Item Name Property max
Property change event maxChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-max-changed
-
min :number
-
The minimum value that can be set on the gauge by the end user. Does not affect the value set on the gauge by API.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
- Default Value:
0
Names
Item Name Property min
Property change event minChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-min-changed
-
orientation :"vertical"|"horizontal"
-
Defines the type of rating gauge to be rendered.
- Deprecated:
-
Since Description 9.0.0
Usage of vertical rating gauges is not recommended.
- Default Value:
"horizontal"
Supported Values:
Value horizontal
vertical
Names
Item Name Property orientation
Property change event orientationChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-orientation-changed
-
preserve-aspect-ratio :"none"|"meet"
-
Specifies whether the images provided should show up at their defined aspect ratios. With 'none', the space is allocated evenly, and shapes could be stretched. With 'meet', The aspect ratio of the shape or image is taken into account when space is allocated. When aspect ratios conflict, the aspect ratio of the selectedState will be used.
- Default Value:
"meet"
Supported Values:
Value meet
none
Names
Item Name Property preserveAspectRatio
Property change event preserveAspectRatioChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-preserve-aspect-ratio-changed
-
readonly :boolean
-
Defines whether the value of the gauge can be changed by the end user.
- Default Value:
false
Names
Item Name Property readonly
Property change event readonlyChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-readonly-changed
-
selected-state :Object
-
The selected shape for the gauge.
Names
Item Name Property selectedState
Property change event selectedStateChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selected-state-changed
-
(nullable) selected-state.border-color :string
-
The border color for selected state. Does not apply if a custom image is specified. The default value comes from the CSS and varies based on theme.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
- Default Value:
""
Names
Item Name Property selectedState.borderColor
-
(nullable) selected-state.color :string
-
The color for selected state. Does not apply if a custom image is specified. The default value comes from the CSS and varies based on theme.
Names
Item Name Property selectedState.color
-
(nullable) selected-state.shape :"circle"|"diamond"|"human"|"square"|"star"|"triangle"|string
-
The shape to be used. Can take the name of a built-in shape or the SVG path commands for a custom shape. Does not apply if a custom image is specified.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
- Default Value:
"star"
Names
Item Name Property selectedState.shape
-
(nullable) selected-state.source :string
-
The URI of the custom image. If specified, it takes precedence over shape. For SVG images, the width and height must be defined on the SVG element as pixels.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
- Default Value:
""
Names
Item Name Property selectedState.source
-
(nullable) selected-state.svg-class-name :string
-
The CSS style class to apply to the selected state. The style class and inline style will override any other styling specified through the properties. Does not apply if custom image is specified.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
- Default Value:
""
Names
Item Name Property selectedState.svgClassName
-
selected-state.svg-style :Partial<CSSStyleDeclaration>
-
The inline style to apply to the selected state. The style class and inline style will override any other styling specified through the properties. Does not apply if custom image is specified. Only SVG CSS style properties are supported.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
- Default Value:
{}
Names
Item Name Property selectedState.svgStyle
-
size :"sm"|"md"|"lg"|"fit"|"small"|"medium"|"large" size :"sm"|"md"|"lg"|"fit"
-
Specifies the size of the individual rating gauge shapes. Note that small, medium and large were deprecated in 12.0.0. Use sm, md and lg instead.
- Deprecated:
-
Since Description 12.0.0
This value will be removed in the future. Please use lg. - Deprecated:
-
Since Description 12.0.0
This value will be removed in the future. Please use md. - Deprecated:
-
Since Description 12.0.0
This value will be removed in the future. Please use sm. - Default Value:
"fit"
Supported Values:
Value Description fit
The size of the individual rating gauge shapes will be determined based on the component size and the value of max
. If no explicit component size is specified, a theme-specific default will be used.large
Large size, as determined by the theme, will be used for the rating gauge shapes. Deprecated in 12.0.0. Use lg instead. lg
Large size, as determined by the theme, will be used for the rating gauge shapes. The component size will be computed to fit the individual shapes. md
Medium size, as determined by the theme, will be used for the rating gauge shapes. The component size will be computed to fit the individual shapes. Not recommended for editable gauges. medium
Medium size, as determined by the theme, will be used for the rating gauge shapes. Deprecated in 12.0.0. Use md instead. sm
Small size, as determined by the theme, will be used for the rating gauge shapes. The component size will be computed to fit the individual shapes. Not recommended for editable gauges. small
Small size, as determined by the theme, will be used for the rating gauge shapes. Deprecated in 12.0.0. Use sm instead. Names
Item Name Property size
Property change event sizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-size-changed
-
step :0.5|1|number
-
Specifies the increment by which values can be specified by the end user.
- Default Value:
1
Supported Values:
Value Argument 0.5
<optional>
1
<optional>
Names
Item Name Property step
Property change event stepChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-step-changed
-
thresholds :Array.<oj.ojRatingGauge.Threshold>
-
An array of objects with the following properties defining the thresholds for the gauge.
- Default Value:
[]
Names
Item Name Property thresholds
Property change event thresholdsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-thresholds-changed
-
tooltip :Object
-
An object containing an optional callback function for tooltip customization.
Names
Item Name Property tooltip
Property change event tooltipChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-tooltip-changed
-
tooltip.renderer :((context: ojRatingGauge.TooltipContext) => ({insert: Element|string}|{preventDefault: boolean}))
-
A function that returns a custom tooltip. The function takes a tooltip context argument, provided by the gauge, and should return an object that contains only one of the two properties:
- insert: HTMLElement | string - An HTML element, which will be appended to the tooltip, or a tooltip string.
- preventDefault:
true
- Indicates that the tooltip should not be displayed. It is not necessary to return {preventDefault:false} to display tooltip, since this is a default behavior.
- Default Value:
null
Names
Item Name Property tooltip.renderer
-
track-resize :"on"|"off"
-
Defines whether the element will automatically render in response to changes in size. If set to
off
, then the application is responsible for callingrefresh
to render the element at the new size.- Default Value:
"on"
Supported Values:
Value off
on
Names
Item Name Property trackResize
Property change event trackResizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-track-resize-changed
-
(readonly) transient-value :number|null
-
The
transientValue
is the read-only property for retrieving the transient value from the rating gauge. It is triggered when hovering over the rating gauge.This is a read-only property so page authors cannot set or change it directly.
- Supports writeback:
true
- Since:
- 4.2.0
Names
Item Name Property transientValue
Property change event transientValueChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-transient-value-changed
-
translations :object|null
-
A collection of translated resources from the translation bundle, or
null
if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.If the component does not contain any translatable resource, the default value of this attribute will be
null
. If not, an object containing all resources relevant to the component.If this component has translations, their documentation immediately follows this doc entry.
Names
Item Name Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-translations-changed
-
(nullable) translations.accessible-contains-controls :string
-
Used to describe a container that contains controls.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gauge.
- Since:
- 14.0.0
Names
Item Name Property translations.accessibleContainsControls
-
(nullable) translations.component-name :string
-
Used to describe the data visualization type for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Gauge"
Names
Item Name Property translations.componentName
-
(nullable) translations.label-and-value :string
-
Used to display a label and its value.
See the translations attribute for usage examples.
- Default Value:
"{0}: {1}"
Names
Item Name Property translations.labelAndValue
-
(nullable) translations.label-clear-selection :string
-
Text shown for clearing multiple selection on touch devices.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gauge.
- Default Value:
"Clear Selection"
Names
Item Name Property translations.labelClearSelection
-
(nullable) translations.label-count-with-total :string
-
Used to display a count out of a total.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gauge.
- Default Value:
"{0} of {1}"
Names
Item Name Property translations.labelCountWithTotal
-
(nullable) translations.label-data-visualization :string
-
Label for data visualizations used for accessibility.
See the translations attribute for usage examples.
- Default Value:
"Data Visualization"
Names
Item Name Property translations.labelDataVisualization
-
(nullable) translations.label-invalid-data :string
-
Text shown when the component receives invalid data.
See the translations attribute for usage examples.
- Default Value:
"Invalid data"
Names
Item Name Property translations.labelInvalidData
-
(nullable) translations.label-no-data :string
-
Text shown when the component receives no data.
See the translations attribute for usage examples.
- Default Value:
"No data to display"
Names
Item Name Property translations.labelNoData
-
(nullable) translations.state-collapsed :string
-
Used to describe the collapsed state for accessibility.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gauge.
- Default Value:
"Collapsed"
Names
Item Name Property translations.stateCollapsed
-
(nullable) translations.state-drillable :string
-
Used to describe a drillable object for accessibility.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gaugee.
- Default Value:
"Drillable"
Names
Item Name Property translations.stateDrillable
-
(nullable) translations.state-expanded :string
-
Used to describe the expanded state for accessibility.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gauge.
- Default Value:
"Expanded"
Names
Item Name Property translations.stateExpanded
-
(nullable) translations.state-hidden :string
-
Used to describe the hidden state for accessibility.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gauge.
- Default Value:
"Hidden"
Names
Item Name Property translations.stateHidden
-
(nullable) translations.state-isolated :string
-
Used to describe the isolated state for accessibility.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gauge.
- Default Value:
"Isolated"
Names
Item Name Property translations.stateIsolated
-
(nullable) translations.state-maximized :string
-
Used to describe the maximized state for accessibility.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gauge.
- Default Value:
"Maximized"
Names
Item Name Property translations.stateMaximized
-
(nullable) translations.state-minimized :string
-
Used to describe the minimized state for accessibility.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gauge.
- Default Value:
"Minimized"
Names
Item Name Property translations.stateMinimized
-
(nullable) translations.state-selected :string
-
Used to describe the selected state for accessibility.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gauge.
- Default Value:
"Selected"
Names
Item Name Property translations.stateSelected
-
(nullable) translations.state-unselected :string
-
Used to describe the unselected state for accessibility.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gauge.
- Default Value:
"Unselected"
Names
Item Name Property translations.stateUnselected
-
(nullable) translations.state-visible :string
-
Used to describe the visible state for accessibility.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 14.0.0
This is deprecated because it is not used by the oj-rating-gauge.
- Default Value:
"Visible"
Names
Item Name Property translations.stateVisible
-
unselected-state :Object
-
The unselected shape for the gauge.
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system.
Names
Item Name Property unselectedState
Property change event unselectedStateChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-unselected-state-changed
-
(nullable) unselected-state.border-color :string
-
The border color for unselected state. Does not apply if a custom image is specified. The default value comes from the CSS and varies based on theme.
- Default Value:
""
Names
Item Name Property unselectedState.borderColor
-
(nullable) unselected-state.color :string
-
The color for unselected state. Does not apply if a custom image is specified. The default value comes from the CSS and varies based on theme.
Names
Item Name Property unselectedState.color
-
(nullable) unselected-state.shape :"circle"|"diamond"|"human"|"square"|"star"|"triangle"|string
-
The shape to be used. Can take the name of a built-in shape or the SVG path commands for a custom shape. Does not apply if a custom image is specified.
- Default Value:
"star"
Names
Item Name Property unselectedState.shape
-
(nullable) unselected-state.source :string
-
The URI of the custom image. If specified, it takes precedence over shape. For SVG images, the width and height must be defined on the SVG element as pixels.
- Default Value:
""
Names
Item Name Property unselectedState.source
-
(nullable) unselected-state.svg-class-name :string
-
The CSS style class to apply to the unselected state. The style class and inline style will override any other styling specified through the properties. Does not apply if custom image is specified.
- Default Value:
""
Names
Item Name Property unselectedState.svgClassName
-
unselected-state.svg-style :Partial<CSSStyleDeclaration>
-
The inline style to apply to the unselected state. The style class and inline style will override any other styling specified through the properties. Does not apply if custom image is specified. Only SVG CSS style properties are supported.
- Default Value:
{}
Names
Item Name Property unselectedState.svgStyle
-
value :number|null
-
The value set on the gauge.
- Supports writeback:
true
Names
Item Name Property value
Property change event valueChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-value-changed
-
visual-effects :"none"|"auto"
-
Defines whether theme specific visual effects such as overlays and gradients are applied to the gauge.
- Deprecated:
-
Since Description 12.1.0
Overlays and gradients are not supported in Redwood theme and are not recommended. As such, this attribute is deprecated.
- Default Value:
"auto"
Supported Values:
Value auto
none
Names
Item Name Property visualEffects
Property change event visualEffectsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-visual-effects-changed
Methods
-
getProperty(property) : {any}
-
Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
Parameters:
Name Type Description property
string The property name to get. Supports dot notation for subproperty access. - Since:
- 4.0.0
Returns:
- Type
- any
Example
Get a single subproperty of a complex property:
let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');
-
refresh : {void}
-
Refreshes the component.
Returns:
- Type
- void
-
setProperties(properties) : {void}
-
Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
Parameters:
Name Type Description properties
Object An object containing the property and value pairs to set. - Since:
- 4.0.0
Returns:
- Type
- void
Example
Set a batch of properties:
myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});
-
setProperty(property, value) : {void}
-
Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
Parameters:
Name Type Description property
string The property name to set. Supports dot notation for subproperty access. value
any The new value to set the property to. - Since:
- 4.0.0
Returns:
- Type
- void
Example
Set a single subproperty of a complex property:
myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");
Type Definitions
-
Threshold
-
- Deprecated:
-
Since Description 14.0.0
This is not recommended in the Redwood design system
Properties:
Name Type Argument Description borderColor
string <optional>
The border color of the threshold. color
string <optional>
The color of the threshold. max
number <optional>
The upper bound of the threshold. This value is ignored for the final threshold, which uses the maximum value of the gauge. shortDesc
string <optional>
Specific description for the threshold and overwrites the shortDesc specified on gauge. This is used for accessibility and also for customizing the tooltip text. -
TooltipContext