91 lines
2.2 KiB
Markdown
91 lines
2.2 KiB
Markdown
# SbMetric
|
|
|
|
A component for displaying a single metric value with optional label, trend indicator, and formatting.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Value | string | - | The metric value to display |
|
|
| Label | string? | null | Label text for the metric |
|
|
| Trend | decimal? | null | Trend percentage (positive/negative) |
|
|
| TrendLabel | string? | null | Custom trend label |
|
|
| Format | MetricFormat | Default | Value format (Number, Currency, Percentage) |
|
|
| Size | SbSize | Medium | Size variant |
|
|
| Color | SbColor? | null | Accent color |
|
|
| Class | string? | null | Additional CSS classes |
|
|
|
|
## Templates / Slots (RenderFragments)
|
|
|
|
| Slot | Type | Description |
|
|
|------|------|-------------|
|
|
| IconTemplate | RenderFragment | Custom icon content |
|
|
| ValueTemplate | RenderFragment | Custom value display |
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-metric` - Base class
|
|
- `sb-metric--sm` - Small size
|
|
- `sb-metric--md` - Medium size
|
|
- `sb-metric--lg` - Large size
|
|
- `sb-metric__value` - Value display
|
|
- `sb-metric__label` - Label text
|
|
- `sb-metric__trend` - Trend indicator
|
|
- `sb-metric__trend--up` - Positive trend
|
|
- `sb-metric__trend--down` - Negative trend
|
|
- `sb-metric__icon` - Icon container
|
|
|
|
## Examples
|
|
|
|
### Basic Usage
|
|
|
|
```razor
|
|
<SbMetric Value="1,234" Label="Total Users" />
|
|
```
|
|
|
|
### With Trend
|
|
|
|
```razor
|
|
<SbMetric Value="$54,321"
|
|
Label="Revenue"
|
|
Trend="12.5m" />
|
|
```
|
|
|
|
### Negative Trend
|
|
|
|
```razor
|
|
<SbMetric Value="89%"
|
|
Label="Completion Rate"
|
|
Trend="-3.2m" />
|
|
```
|
|
|
|
### With Icon
|
|
|
|
```razor
|
|
<SbMetric Value="42" Label="Active Tasks">
|
|
<IconTemplate>
|
|
<SbIcon Name="check-circle" Color="SbColor.Success" />
|
|
</IconTemplate>
|
|
</SbMetric>
|
|
```
|
|
|
|
### Large Size
|
|
|
|
```razor
|
|
<SbMetric Value="$1.2M"
|
|
Label="Annual Revenue"
|
|
Size="SbSize.Lg"
|
|
Trend="8.3m" />
|
|
```
|
|
|
|
### In Dashboard Layout
|
|
|
|
```razor
|
|
<SbGrid Columns="4" Gap="4">
|
|
<SbMetric Value="2,543" Label="Total Orders" Trend="12m" />
|
|
<SbMetric Value="$89,432" Label="Revenue" Trend="8.2m" />
|
|
<SbMetric Value="1,205" Label="New Customers" Trend="23m" />
|
|
<SbMetric Value="98.5%" Label="Satisfaction" Trend="-0.3m" />
|
|
</SbGrid>
|
|
```
|