progress-bar
Use the progress-bar component to visually represent a task or process's current status and progression by indicating how much time or work remains until completion.
Some properties are common to all components, see Common component properties for a list and their configuration options.
Core structure | |
|---|---|
value | current - determines the current status to be shown in the bar. This can be dynamically set with an expression, e.g. =$count(@ctx.components.packList.state.selected) max - numeric, set the maximum value of the progress bar, e.g., the sales target is 5 new customers a month, making the max: 5 . You can set the maximum dynamically, e.g., using the datasource =$count(@ctx.datasources.checkbox-list) |
Other options | |
|---|---|
color | Sets the color of the progress -bar, choose a color from the provided color palette. Default color is black if the property is not specified in the YAML. |
errorText | Add text, string, or expressions to show in text under the progress bar. Text is shown in red to indicate an error with progress. |
helperText | Add text, string, or expressions to guide users by showing text under the progress bar, e.g, Monthly target is $4000. |
size | Choose from extra-large, large, medium, small, tiny, with large being the default if property is not specified in the YAML. |
steps | Numeric with a maximum of 20. Use steps to divide up the bar. By default, the bar is continuous. For example, steps:5 will break down the bar into five equal sections. The higher the number of steps the smaller each bar segment becomes. |
style | isDisabled can be set to true or false. If true the progress-bar is disabled. |
subtitle | value - can add text, string or an expression to show as the subtitle, which is visible under the progress-bar. align - center, left, and right alignment with the default as center if the property is not specified in the YAML. color - specify the color the subtitle text by choosing a color from the provided color palette. position - place the subtitle at the bottom or top. The top is the default if the property is not specified in the YAML. |
title | value - can add text, string or an expression to show as the title, which is visible under the progress-bar. align - center, left and right alignment with the default as center if the property is not specified in the YAML. color - specify the color for the title text by choosing a color from the provided color palette. position - place the title at the bottom or top of the progress-bar. The top is the default if the property is not specified in the YAML. |
Actions | |
|---|---|
onPress | Choose from the provided list of available actions, for example, use the go-to action to open a different . The action is triggered when the progress-bar is pressed; e.g., navigate to another . |
- The title, subtitle, and bar can use a color property. Ensure the property is added at the correct YAML level for each.
- The component.progress-bar can only be used on a jig.default.
This example shows the different ways the title and subtitle can be configured using position, color and alignment.
Example: See the full example in GitHub.
You can use the helperText property to provide a tip or hint to help users read the progress-bar. Use the errorText to show an error or negative text at the bottom of the progress-bar. In this example, the errorText is used to show that there has been no progress made.
Example: See the full example in GitHub.
In this example we change the color of the bar, break the bar up by using steps and change the thickness of the bar using the size property.
Example: See the full example in GitHub.
The progress-bar can be sized from a thin (tiny) to extra thick (extra-large) bar using the size property. No color is used in this example so the default color black is used.
Example: See the full example in GitHub.
The progress-bar can be shown as a continous bar or broken up into segments. Use the step property to determine the number of segments required. The larger the number of steps, the smaller the segments as shown in the bars on the left.
Example: See the full example in GitHub.
In this example the onPress property uses the action.set-state set to true. When the progress-bar is pressed the state is evaluated in the when property of the component.image, which then shows the image.
Example: See the full example in GitHub.
This example shows how the component.progress-bar steps are dynamically updated when the list-item checkbox is selected. The errorText property and the helperText property are dynamically changed using an expression.
Example: See the full example in GitHub.
