Usage
Signature:
interface CRatingGaugeElement
Typescript Import Format
//To typecheck the element APIs, import as below.
import { CRatingGaugeElement } from "oj-c/rating-gauge";
//For the transpiled javascript to load the element's module, import as below
import "oj-c/rating-gauge";
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.
Attributes
-
changed :boolean
-
Whether there has been a value entered by the user even if it is the same as the initial value.
- 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
-
color :"neutral"|"gold"
-
Specifies the color of the individual rating gauge items.
- Default Value:
"neutral"
Supported Values:
Value Description gold
gold color Rating Gauge neutral
neutral color Rating Gauge (default, if unspecified) Names
Item Name Property color
Property change event colorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-color-changed
-
datatip :(context: oj-c.RatingGauge.DatatipContext) => string
-
The rating gauge datatip string. Datatip is only used for interactive rating gauges.
Names
Item Name Property datatip
Property change event datatipChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-datatip-changed
-
described-by :(string|null)
-
Used to establish a relationship between this component and another element. A common use is to tie a label, which can be a text in a div or some other HTML element, and the oj-c-rating-gauge together for accessibility. The oj-label element has a label-id, which is used by the described-by attribute to tie the two components together to facilitate correct screen reader behavior.
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 and the rating gauge is hidden from screen readers if set to true.
- 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
-
labelled-by :(string|null)
-
Used to establish a relationship between this component and another element. A common use is to tie a label, which can be a text in a div or some other HTML element, and the oj-c-rating-gauge together for accessibility. The oj-label element has a label-id, which is used by 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 items 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
-
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
-
size :"sm"|"md"|"lg"
-
Specifies the size of the individual rating gauge items.
- Default Value:
"md"
Supported Values:
Value Description lg
large Rating Gauge md
medium Rating Gauge (default, if unspecified) sm
small Rating Gauge 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 :number
-
Specifies the increment by which values can be changed by the end user.
- Default Value:
1
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-c.RatingGauge.Threshold>
-
An array of objects defining the thresholds for the rating gauge.
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 :string
-
The rating gauge tooltip. Tooltip is only used for read only rating gauges. If aria-label is not specified, tooltip will be used as the aria-label.
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
-
(readonly) transient-value :number
-
A read-only property for retrieving the transient value from the rating gauge. It is updated upon user gestures that cause transient value changes, such as hovering over the rating gauge.
- Supports writeback:
true
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
-
value :(number|null)
-
The value of the Rating Gauge. The element's value attribute is used if it is provided, otherwise the default value of 0 is used. Any other negative value will default to 0.
- Default Value:
0
- 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
Methods
-
getProperty(property) : {any}
-
Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description property
The property name to get. Supports dot notation for subproperty access. Returns:
- Type
- any
-
setProperties(properties) : {void}
-
Performs a batch set of properties.
Parameters:
Name Type Description properties
An object containing the property and value pairs to set. Returns:
- Type
- void
-
setProperty(property, value) : {void}
-
Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.
Parameters:
Name Type Description property
The property name to set. Supports dot notation for subproperty access. value
The new value to set the property to. Returns:
- Type
- void
Type Definitions
-
DatatipContext
-
Context for datatip function.
Properties:
Name Type Description value
number The value of the currently active rating gauge item. -
Threshold
-
Properties:
Name Type Argument Description accessibleLabel
string <optional>
A label for the threshold used for accessibility purposes. color
string <optional>
The color of the threshold.
In addition to standard CSS color values, special enumerated values 'danger', 'warning', and 'success' are also supported. These special values are mapped to corresponding CSS color values based upon the current theme.
max
number The maximum value of the threshold.