Usage
Signature:
interface ProgressCircleElement
Typescript Import Format
//To typecheck the element APIs, import as below.
import {ProgressCircleElement} from "ojs/ojprogress-circle";
//For the transpiled javascript to load the element's module, import as below
import "ojs/ojprogress-circle";
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
-
Small size
-
Medium size
-
Large size
See JET CSS Variables for additional details.
Name | Type | Description |
---|---|---|
--oj-progress-circle-value-bg-color |
<color> | Progress circle value background color |
--oj-progress-circle-determinate-track-bg-color |
<color> | Determinate progress circle track background color |
CSS variables used by small size progress circles
Name | Type | Description |
---|---|---|
--oj-progress-circle-sm-size |
<length> | Progress circle size applied to small ones |
--oj-progress-circle-sm-track-width |
<length> | Progress circle track width applied to small sizing progress circles |
CSS variables used by medium size progress circles
Name | Type | Description |
---|---|---|
--oj-progress-circle-md-size |
<length> | Progress circle size applied to medium ones |
--oj-progress-circle-md-track-width |
<length> | Progress circle track width applied to medium sizing progress circles |
CSS variables used by large size progress circles
Name | Type | Description |
---|---|---|
--oj-progress-circle-lg-size |
<length> | Progress circle size applied to large ones |
--oj-progress-circle-lg-track-width |
<length> | Progress circle track width applied to large sizing progress circles |
Attributes
-
max :number
-
The maximum allowed value. The element's max attribute is used if it is provided, otherwise the default value of 100 is used.
- Default Value:
100
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
-
size :"sm"|"md"|"lg"
-
Specifies the size of the progress circle.
- Default Value:
'md'
Supported Values:
Value Description sm
small progress circle md
medium progress circle (default, if unspecified) lg
large progress circle 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
-
value :number
-
The value of the Progress Circle. The element's value attribute is used if it is provided, otherwise the default value of 0 is used. For indeterminate Progress, set value to -1. Any other negative value will default to 0.
- Default Value:
0
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 a value for a property or a single subproperty for complex properties.
Parameters:
Name Type Description property
string 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
Object 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 [property]Changed event.
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. Returns:
- Type
- void