166 lines
4.2 KiB
Markdown
166 lines
4.2 KiB
Markdown
# SbProgress
|
|
|
|
Displays progress indication for ongoing operations. Supports both linear (bar) and circular styles, with determinate and indeterminate modes.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Type | SbProgressType | Linear | Progress type (Linear, Circular) |
|
|
| Value | double | 0 | Progress value from 0 to 100 |
|
|
| Indeterminate | bool | false | Shows continuous animation without specific progress |
|
|
| Color | SbColor | Primary | Progress bar color |
|
|
| Size | SbSize | Md | Size for circular progress (Sm, Md, Lg) |
|
|
| ShowLabel | bool | false | Whether to show the percentage label |
|
|
| Class | string? | null | Additional CSS classes |
|
|
| Style | string? | null | Inline styles |
|
|
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes |
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-progress` - Base class
|
|
- `sb-progress--linear` - Linear (bar) type
|
|
- `sb-progress--circular` - Circular type
|
|
- `sb-progress--sm` - Small size
|
|
- `sb-progress--md` - Medium size
|
|
- `sb-progress--lg` - Large size
|
|
- `sb-progress--primary` - Primary color
|
|
- `sb-progress--secondary` - Secondary color
|
|
- `sb-progress--success` - Success color
|
|
- `sb-progress--warning` - Warning color
|
|
- `sb-progress--danger` - Danger color
|
|
- `sb-progress--indeterminate` - Indeterminate animation
|
|
- `sb-progress__track` - Track/background (linear)
|
|
- `sb-progress__bar` - Progress bar (linear)
|
|
- `sb-progress__label` - Percentage label (linear)
|
|
- `sb-progress__track-circle` - Track circle (circular)
|
|
- `sb-progress__bar-circle` - Progress circle (circular)
|
|
- `sb-progress__label-text` - Percentage label (circular)
|
|
|
|
## Accessibility
|
|
|
|
- Uses `role="progressbar"`
|
|
- Sets `aria-valuenow`, `aria-valuemin`, `aria-valuemax` for determinate progress
|
|
- Omits `aria-valuenow` for indeterminate progress
|
|
|
|
## Examples
|
|
|
|
### Linear Progress
|
|
|
|
```razor
|
|
<SbProgress Value="25" />
|
|
<SbProgress Value="50" />
|
|
<SbProgress Value="75" />
|
|
<SbProgress Value="100" />
|
|
```
|
|
|
|
### Linear with Label
|
|
|
|
```razor
|
|
<SbProgress Value="65" ShowLabel="true" />
|
|
```
|
|
|
|
### Indeterminate Linear
|
|
|
|
```razor
|
|
<SbProgress Indeterminate="true" />
|
|
```
|
|
|
|
### Different Colors
|
|
|
|
```razor
|
|
<SbProgress Value="50" Color="SbColor.Primary" />
|
|
<SbProgress Value="50" Color="SbColor.Success" />
|
|
<SbProgress Value="50" Color="SbColor.Warning" />
|
|
<SbProgress Value="50" Color="SbColor.Danger" />
|
|
```
|
|
|
|
### Circular Progress
|
|
|
|
```razor
|
|
<SbProgress Type="SbProgressType.Circular" Value="25" />
|
|
<SbProgress Type="SbProgressType.Circular" Value="50" />
|
|
<SbProgress Type="SbProgressType.Circular" Value="75" />
|
|
```
|
|
|
|
### Circular with Label
|
|
|
|
```razor
|
|
<SbProgress Type="SbProgressType.Circular" Value="75" ShowLabel="true" />
|
|
```
|
|
|
|
### Circular Sizes
|
|
|
|
```razor
|
|
<SbProgress Type="SbProgressType.Circular" Value="50" Size="SbSize.Sm" />
|
|
<SbProgress Type="SbProgressType.Circular" Value="50" Size="SbSize.Md" />
|
|
<SbProgress Type="SbProgressType.Circular" Value="50" Size="SbSize.Lg" />
|
|
```
|
|
|
|
### Indeterminate Circular
|
|
|
|
```razor
|
|
<SbProgress Type="SbProgressType.Circular" Indeterminate="true" />
|
|
```
|
|
|
|
### File Upload Example
|
|
|
|
```razor
|
|
@if (isUploading)
|
|
{
|
|
<SbProgress Value="@uploadProgress" ShowLabel="true" Color="SbColor.Primary" />
|
|
<p>Uploading: @fileName</p>
|
|
}
|
|
|
|
@code {
|
|
private bool isUploading;
|
|
private double uploadProgress;
|
|
private string fileName = "";
|
|
|
|
private async Task UploadFile()
|
|
{
|
|
isUploading = true;
|
|
fileName = "document.pdf";
|
|
|
|
for (int i = 0; i <= 100; i += 10)
|
|
{
|
|
uploadProgress = i;
|
|
StateHasChanged();
|
|
await Task.Delay(200);
|
|
}
|
|
|
|
isUploading = false;
|
|
}
|
|
}
|
|
```
|
|
|
|
### Loading Overlay with Circular Progress
|
|
|
|
```razor
|
|
@if (isLoading)
|
|
{
|
|
<div class="loading-overlay">
|
|
<SbProgress Type="SbProgressType.Circular"
|
|
Indeterminate="true"
|
|
Size="SbSize.Lg" />
|
|
<p>Loading data...</p>
|
|
</div>
|
|
}
|
|
```
|
|
|
|
### Multi-Step Progress
|
|
|
|
```razor
|
|
<div class="step-progress">
|
|
<span>Step @currentStep of @totalSteps</span>
|
|
<SbProgress Value="@((double)currentStep / totalSteps * 100)"
|
|
ShowLabel="true"
|
|
Color="SbColor.Success" />
|
|
</div>
|
|
|
|
@code {
|
|
private int currentStep = 2;
|
|
private int totalSteps = 5;
|
|
}
|
|
```
|