ProgressBar

The ProgressBar widget is used to display the progress of a long-running operation. It provides a graphical representation of the progress made. It always displays a progress bar and can optionally show the percentage completed.

Properties

The ProgressBar widget inherits from Widget class → Has all Widget properties.

• value: number → The percentage.
• paddingBar: number → The padding of the progress bar.

Constructor

Parameter	Type	Required	Description
id	string	yes	The id of the widget
parent	Widget	no	The parent of the widget. Default is null

TS Example

src/main.ts

import { ProgressBar } from "@cedro/ui";

const myProgress: ProgressBar = new ProgressBar("my-progress");

myProgress.setValue(60);

TSX Example

src/main.tsx

import { WProgressBar } from "@cedro/ui";

<WProgressBar id="my-progress" value="60" paddingBar="2" hideLabel />

Public Methods

setValue

Set the percentage value of the progress bar.

Parameters

Parameter	Type	Required	Description
value	number	yes	The value.

Returns Value

void

Example

src/main.ts

myProgress.setValue(60);

setPaddingBar

Set the padding of the progress bar.

Parameters

Parameter	Type	Required	Description
padding	number	yes	The padding.

Returns Value

void

Example

src/main.ts

myProgress.setPaddingBar(2);

getValue

Get the percentage value of the progress bar.

Parameters

void

Returns Value

number

Example

src/main.ts

const value = myProgress.getValue();

hideLabel

Hide the percentage label of the widget.

Parameters

void

Returns Value

void

Example

src/main.ts

myProgress.hideLabel();

displayLabel

Show the percentage label of the widget.

Parameters

void

Returns Value

void

Example

src/main.ts

myProgress.displayLabel();