129 lines
3.7 KiB
Markdown
129 lines
3.7 KiB
Markdown
# SbStatCard
|
|
|
|
A card component for displaying key metrics and statistics with optional icon, prefix/suffix, trend, description, and actions.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default | Description |
|
|
|-----------|------|---------|-------------|
|
|
| Label | string | - | Label describing the statistic |
|
|
| Value | string | - | The statistic value (displayed as-is) |
|
|
| Prefix | string? | null | Text before the value (e.g. "$") |
|
|
| Suffix | string? | null | Text after the value (e.g. "%", "min") |
|
|
| Trend | double? | null | Trend percentage (positive or negative) |
|
|
| TrendLabel | string? | null | Trend description (e.g. "vs last month") |
|
|
| ShowTrend | bool | true | Whether to show trend when Trend is set |
|
|
| Description | string? | null | Additional description text below trend |
|
|
| Class | string? | null | Additional CSS classes |
|
|
|
|
## Slots (RenderFragments)
|
|
|
|
| Slot | Type | Description |
|
|
|------|------|-------------|
|
|
| Icon | RenderFragment? | Icon content (e.g. `<Icon><SbIcon Name="users" /></Icon>`) |
|
|
| Actions | RenderFragment? | Action buttons or links (e.g. "View All" button) |
|
|
|
|
## CSS Classes
|
|
|
|
- `sb-stat-card` - Base class
|
|
- `sb-stat-card__icon` - Icon container
|
|
- `sb-stat-card__content` - Content area
|
|
- `sb-stat-card__label` - Label text
|
|
- `sb-stat-card__value` - Value display
|
|
- `sb-stat-card__prefix` - Value prefix
|
|
- `sb-stat-card__suffix` - Value suffix
|
|
- `sb-stat-card__trend` - Trend row
|
|
- `sb-stat-card__trend--positive` - Positive trend (e.g. arrow up)
|
|
- `sb-stat-card__trend--negative` - Negative trend (e.g. arrow down)
|
|
- `sb-stat-card__trend-icon` - Trend arrow
|
|
- `sb-stat-card__trend-value` - Trend percentage
|
|
- `sb-stat-card__trend-label` - Trend label text
|
|
- `sb-stat-card__description` - Description text
|
|
- `sb-stat-card__actions` - Actions area
|
|
|
|
## Examples
|
|
|
|
### Basic Usage
|
|
|
|
```razor
|
|
<SbStatCard Label="Total Users" Value="2,543" />
|
|
|
|
<SbStatCard Label="Revenue" Value="98,234" Prefix="$" />
|
|
|
|
<SbStatCard Label="Growth Rate" Value="12.5" Suffix="%" />
|
|
```
|
|
|
|
### With Icons
|
|
|
|
```razor
|
|
<SbStatCard Label="Total Sales" Value="1,249" Prefix="$">
|
|
<Icon>
|
|
<SbIcon Name="dollar-sign" Size="SbSize.Xl" Color="SbColor.Success" />
|
|
</Icon>
|
|
</SbStatCard>
|
|
|
|
<SbStatCard Label="Active Users" Value="8,459">
|
|
<Icon>
|
|
<SbIcon Name="users" Size="SbSize.Xl" Color="SbColor.Primary" />
|
|
</Icon>
|
|
</SbStatCard>
|
|
```
|
|
|
|
### With Trends
|
|
|
|
```razor
|
|
<SbStatCard Label="Total Orders" Value="3,456"
|
|
Trend="12.5" TrendLabel="vs last month">
|
|
<Icon>
|
|
<SbIcon Name="shopping-cart" Size="SbSize.Xl" Color="SbColor.Primary" />
|
|
</Icon>
|
|
</SbStatCard>
|
|
|
|
<SbStatCard Label="Bounce Rate" Value="23.4" Suffix="%"
|
|
Trend="-5.3" TrendLabel="vs last month">
|
|
<Icon>
|
|
<SbIcon Name="trend-down" Size="SbSize.Xl" Color="SbColor.Warning" />
|
|
</Icon>
|
|
</SbStatCard>
|
|
```
|
|
|
|
### With Descriptions
|
|
|
|
```razor
|
|
<SbStatCard Label="Page Views" Value="234,567"
|
|
Trend="15.3" TrendLabel="from last month"
|
|
Description="Total page views across all pages">
|
|
<Icon>
|
|
<SbIcon Name="eye" Size="SbSize.Xl" Color="SbColor.Info" />
|
|
</Icon>
|
|
</SbStatCard>
|
|
```
|
|
|
|
### With Actions
|
|
|
|
```razor
|
|
<SbStatCard Label="Pending Tasks" Value="12"
|
|
Description="Tasks awaiting review">
|
|
<Icon>
|
|
<SbIcon Name="clipboard-list" Size="SbSize.Xl" Color="SbColor.Warning" />
|
|
</Icon>
|
|
<Actions>
|
|
<SbButton Size="SbSize.Sm" Variant="SbButtonVariant.Outline">
|
|
View All
|
|
</SbButton>
|
|
</Actions>
|
|
</SbStatCard>
|
|
```
|
|
|
|
### Without Trend Display
|
|
|
|
```razor
|
|
<SbStatCard Label="Total Products" Value="1,234"
|
|
ShowTrend="false"
|
|
Description="Items in inventory">
|
|
<Icon>
|
|
<SbIcon Name="package" Size="SbSize.Xl" Color="SbColor.Secondary" />
|
|
</Icon>
|
|
</SbStatCard>
|
|
```
|