Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Configurations of a progress bar component

  • Label: progress Progress bar component identified on UI with the help of a label. a label is typically visible above the component. same label can be reused across different progress bars/labels can be duplicated.

...

  • Progress bar size: progress bar is Progress bars are available in four sizes i.e x-small, small, medium, large

...

  • Variant: Variants display the progress bar with different colors to convey different meanings, progress bar comes in five variants:

    • Default: Shows progress bar in blue color

    • Inverse: Shows progress bar in gray color

    • Success: Shows progress bar in green color

    • Warning: Shows progress bar in yellow color

    • Error: Shows progress bar in red color

...

  • Value: Value to be bound to the progress barA user needs to enter a value into the value input box to bind it with the progress bar, value is an indication of progress, eg. progress bar denotes completion when the value is 100

  • Show percentage: To show indicate the progress of an operation in terms of percentage

  • Show rounded: it It adds a border radius to the progress bar to give it a rounded look

  • Show vertical: Shows Displays a vertical progress bar verticallyfrom top to bottom to indicate the progress of an operation.

  • Value Destination Type: The user can bind a value to the progress bar component in two ways

    • Variable: The user can create a variable of type integer from the variable tab with a default value and can use such a variable as a value to the progress bar component

...

  • Model: The user can create a model and use such model as a value to the progress bar component. the model captures value from an object that we select while the model creation

...