0.1.1 • Published 6 months ago
@teenageinterface/progress v0.1.1
Progress Component
The Progress component is a progress bar that allows you to display the progress of a task or process. You can customize its appearance based on different types and control whether the value is shown or not.
Installation
Ensure that you have installed the @teenageinterface/progress library in your Angular project. If not, you can add it using:
npm install @teenageinterface/progressUsage
Import the ProgressComponent into your Angular application:
import { ProgressComponent } from '@teenageinterface/progress';
@Component({
selector: 'app-progress-example',
template: `
<tiProgress [value]="progressValue" [showValue]="true" [type]="'primary'"></tiProgress>
`,
})
export class ProgressExampleComponent {
progressValue: number = 75;
}Example
<tiProgress [value]="progressValue" [showValue]="true" [type]="'score'"></tiProgress>Properties
| Property | Type | Default | Description |
|---|---|---|---|
value | number | 0 | The progress value (between 0 and 100). |
showValue | boolean | true | If true, the progress value is displayed inside the bar. |
width | string | "300px" | The width of the progress bar. |
type | "default" \| "primary" \| "score" | "default" | The type of the progress bar, determining its appearance. |
Types
The type property can be one of the following values:
default: A neutral progress bar.primary: A blue progress bar.score: A progress bar that changes color based on the value, where:- Green if the value is greater than or equal to 70.
- Yellow if the value is between 50 and 69.
- Red if the value is less than 50.
Documentation
For more information, visit the official documentation.
Repository
The source code is available on GitHub.
License
This project is licensed under the MIT License.