跳到主要内容

Bar progress

What is Bar progress?

The Bar Progress component is a visual element that represents the progress or completion of a task or process. It displays a horizontal bar that fills up or shrinks based on the specified progress value.

Properties

PropertiesDescription
Valuethe percentage value represents the progress
Hide value labelwhether the value label is hidden
LabelThe name of the field displayed to the user
Hidden labelSet whether to display the label
CaptionA caption used to describe the field in detail
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity
Stylesthe stroke width of the bar represents the progress

Method

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorcolor of the bar
displayNamethe name of this component (ie button1)
hiddenhidden status (true or false)
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
strokeWidthwidth of the bar stroke
tooltipTextvalue of tooltip text
valuepercentage value of the progress

Example: {{barProgress1.value}}

Use case

We will demonstrate how to make a form with bar progress at the bottom showing the completion progress of the form.

Step 1 Add Components

Add a form component with the default text "Form" and a "Submit" button to canvas.

Add an input component, a number input component, and a bar progress component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the bar progress component to be "Progress".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

bar_layout

Step 2 Configure the component

For the input and number input components, we can configure them to set the value in bar progress component to reflect the progress of completion.

  1. Click the input and number input component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the bar progress component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as
{
{
input1.value && numberInput1.value
? "100"
: input1.value || numberInput1.value
? "50"
: "0";
}
}

bar_input_num_config

Note: need to set the event handler as described above to BOTH input and number input components.

For the button component, we can configure it to submit the form if the form is completed (ie bar progress 100%)

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method and put {{barProgress1.value == 100}} in Only run when

bar_button_submit_config

Similarly, we can configure the button to show warning when the user is trying to submit an uncompleted form.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Show notification in action, title "Error!" and description "Please fill out the form before submitting". Choose Error for type, put {{2000}} for the duration (2 seconds), and put {{barProgress1.value<100}} for Only run when.

bar_button_show_config

Step 4 Test

bar_test