Progress Component

Last updated: 4 months ago

Category: Data

The PROGRESS component is a WebComponent implementation based on the Progress module. Compared to the original module, it offers simpler usage without initialization requirements, making it ideal for project integration. It supports multiple variants (bar, full-circle, semicircle, and large-arc designs), theme colors (including gradients), customizable dimensions, and accepts any numeric progress value (not limited to percentages).

Basic Usage

Use the oc-progress element to create a progress bar, typically initialized with the value attribute.

Appearance Types

Set the progress bar type using the type attribute, supported values include: line, circle, semicircle, and gapcircle.

Theme Colors

Set the theme color using the theme attribute, supported values include: prim, succ, error, warn, info, issue, and text.

Attributes

This component encapsulates the built-in instance, and its attributes are consistent with the parameters of the built-in instance. You can click here to view all parameters.

Several important notes:

1. All component attributes should be lowercase.
2. Attribute values must be in string format.
3. If an attribute value is an object, the surrounding { and } symbols can be omitted.
4. For attribute names that are verb-object structures or composed of two words, use hyphens to separate them. For example:
   • Module parameter contType (if exists) should be written as cont-type in component attributes
   • Parameter b4Init should be written as b4-init in attributes
5. All methods, events, and variables can be accessed through the built-in instance (typically via this.ins).
6. When data cannot be passed through component attributes (e.g., due to nested single/double quote issues), you can manipulate the built-in instance to achieve your goal. It's particularly recommended to implement event listeners through the built-in instance.

Common Methods

Common component methods:

• set: Set properties (takes key-value pairs or array)
• reset: Reset properties (no params)
• clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Common Events

Common component events:

• connected: Component connected (no params)
• disconnected: Component disconnected (no params)
• adopted: Component moved (no params)
• set: Property set (receives value)
• cleared: Property cleared (no params)
• reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})