Progress Bar
처리 중인 항목의 진행 상황을 시각적으로 보여줍니다.
Live Demo
Default
60%
Status
100%
40%
0%
With Item Count
60%
6/10Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | non-standard range의 경우에 normalise 된 값이 필요합니다. (required, 0~100) |
| showLabel | boolean | false | progress 를 표준 스케일(0 to 100)로 표시합니다. |
| showStatus | boolean | false | 현재 진행 상태를 표시합니다. value의 값과 error 속성에 따라 "In Progress" | "Complete" | "Error Occured" 중 하나의 상태를 표시합니다. |
| showRatio | boolean | false | Non-standard range 인 경우에 현재/전체 진행 된 항목수를 비율로 표시합니다. |
| helperText | string | - | 현재 진행 상태에 대한 남은 시간 등의 설명을 표현하는데 사용 될 수 있습니다. |
| error | boolean | false | error 가 발생했을 경우에는 error 상태를 표시합니다. |
| min | number | - | showRatio 가 true일 경우에 required 입니다. (0~100) |
| max | number | - | showRatio 가 true일 경우에 required 입니다. (0~100) |
| locale | { complete: string; error: string; inProgress: string } | - | locale 속성을 사용하여 3가지 기본 상태에 대한 메시지를 변경할 수 있습니다. |
Anatomy
- Track
- Completion indicator
- Active batch indicator (optional)
- Progress text (optional)
- Status text (optional)
- Count text (optional)