sufi-chain/sufi-blazor
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit
Release NuGet Packages / pack-and-push (release) Failing after 10m17s
Details

Browse Source
This commit is contained in:
Pooria Shariatzadeh
2026-05-21 11:20:43 +03:30
commit 3ff35dedb5
536 changed files with 94352 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/feedback/SbAlert.md
+123
View File
@@ -0,0 +1,123 @@
# SbAlert
Displays important messages to users with contextual severity levels. Alerts can be dismissible and support various severities like info, success, warning, and danger.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Severity | SbAlertSeverity | Info | Alert severity level (Info, Success, Warning, Danger) |
| Title | string? | null | Optional alert title displayed above the message |
| Dismissible | bool | false | Whether the alert can be dismissed by the user |
| Dense | bool | false | Reduces vertical padding for a more compact alert |
| Class | string? | null | Additional CSS classes |
| Style | string? | null | Inline styles |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes |
## Events
| Event | Type | Description |
|-------|------|-------------|
| OnDismiss | EventCallback | Fired when the alert is dismissed |
## Templates / Slots
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment | Main content/message of the alert |
### Template Usage
```razor
<SbAlert Severity="SbAlertSeverity.Info">
This is the alert message content.
</SbAlert>
```
## CSS Classes
- `sb-alert` - Base class
- `sb-alert--info` - Info severity
- `sb-alert--success` - Success severity
- `sb-alert--warning` - Warning severity
- `sb-alert--danger` - Danger severity
- `sb-alert--dense` - Compact variant
- `sb-alert__icon` - Icon container
- `sb-alert__content` - Content wrapper
- `sb-alert__title` - Title text
- `sb-alert__message` - Message text
- `sb-alert__dismiss` - Dismiss button
## Accessibility
- Uses `role="alert"` for danger severity (assertive)
- Uses `role="status"` for other severities (polite)
- Dismiss button has `aria-label="Dismiss"`
## Examples
### Basic Alerts
```razor
<SbAlert Severity="SbAlertSeverity.Info">
This is an informational message.
</SbAlert>
<SbAlert Severity="SbAlertSeverity.Success">
Operation completed successfully!
</SbAlert>
<SbAlert Severity="SbAlertSeverity.Warning">
Please review before proceeding.
</SbAlert>
<SbAlert Severity="SbAlertSeverity.Danger">
An error occurred. Please try again.
</SbAlert>
```
### With Title
```razor
<SbAlert Severity="SbAlertSeverity.Info" Title="Information">
Here are some details you should know about.
</SbAlert>
```
### Dismissible Alert
```razor
<SbAlert Severity="SbAlertSeverity.Warning"
Dismissible="true"
OnDismiss="HandleDismiss">
This alert can be closed by the user.
</SbAlert>
@code {
private void HandleDismiss()
{
// Handle dismissal
}
}
```
### Dense Variant
```razor
<SbAlert Severity="SbAlertSeverity.Info" Dense="true">
Compact alert with less vertical padding.
</SbAlert>
```
### Full Example
```razor
<SbAlert Severity="SbAlertSeverity.Success"
Title="Success!"
Dismissible="true"
Dense="false"
Class="my-custom-alert"
OnDismiss="() => alertVisible = false">
Your changes have been saved successfully.
</SbAlert>
```
docs/components/feedback/SbBadge.md
+100
View File
@@ -0,0 +1,100 @@
# SbBadge
A small status indicator that displays a count or dot to draw attention to an element. Commonly used for notification counts, status indicators, or labeling items.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Value | int? | null | Numeric value to display in the badge |
| Max | int | 99 | Maximum value before showing "max+" (e.g., "99+") |
| Dot | bool | false | When true, shows as a small dot without value |
| Color | SbColor | Primary | Badge color theme |
| AriaLabel | string? | null | Accessible label for screen readers |
| Class | string? | null | Additional CSS classes |
| Style | string? | null | Inline styles |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes |
## Templates / Slots
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment? | Custom content to display inside the badge (takes precedence over Value) |
### Template Usage
```razor
<SbBadge>
Custom Content
</SbBadge>
```
## CSS Classes
- `sb-badge` - Base class
- `sb-badge--primary` - Primary color
- `sb-badge--secondary` - Secondary color
- `sb-badge--success` - Success color
- `sb-badge--warning` - Warning color
- `sb-badge--danger` - Danger color
- `sb-badge--dot` - Dot variant (no text)
## Accessibility
- Uses `aria-label` for screen reader description
- Content is visible to assistive technologies
## Examples
### Basic Badge with Value
```razor
<SbBadge Value="5" />
<SbBadge Value="42" />
<SbBadge Value="150" Max="99" /> @* Shows "99+" *@
```
### Different Colors
```razor
<SbBadge Value="3" Color="SbColor.Primary" />
<SbBadge Value="3" Color="SbColor.Success" />
<SbBadge Value="3" Color="SbColor.Warning" />
<SbBadge Value="3" Color="SbColor.Danger" />
```
### Dot Badge
```razor
<SbBadge Dot="true" Color="SbColor.Success" />
<SbBadge Dot="true" Color="SbColor.Danger" />
```
### With Custom Content
```razor
<SbBadge Color="SbColor.Primary">
NEW
</SbBadge>
<SbBadge Color="SbColor.Warning">
BETA
</SbBadge>
```
### Badge on Element
```razor
<div style="position: relative; display: inline-block;">
<SbIcon Name="bell" />
<SbBadge Value="3"
Color="SbColor.Danger"
Style="position: absolute; top: -8px; right: -8px;" />
</div>
```
### With Accessibility
```razor
<SbBadge Value="5" AriaLabel="5 unread notifications" />
```
docs/components/feedback/SbBanner.md
+149
View File
@@ -0,0 +1,149 @@
# SbBanner
A prominent message bar for important announcements or alerts that spans the full width of its container. Supports multiple severity levels, custom actions, and dismissible behavior.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Title | string? | null | Banner title displayed prominently |
| Message | string? | null | Banner message text (used when ChildContent is not provided) |
| Severity | SbBannerSeverity | Info | Banner severity (Info, Success, Warning, Error) |
| Dismissible | bool | true | Whether the banner can be dismissed |
| Class | string? | null | Additional CSS classes |
## Events
| Event | Type | Description |
|-------|------|-------------|
| OnDismiss | EventCallback | Fired when the banner is dismissed |
## Templates / Slots
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment? | Custom content for the banner message (takes precedence over Message) |
| Actions | RenderFragment? | Action buttons displayed at the bottom of the banner |
### Template Usage
#### Basic Content
```razor
<SbBanner Title="Notice" Severity="SbBannerSeverity.Info">
This is custom content inside the banner.
</SbBanner>
```
#### With Actions
```razor
<SbBanner Title="Update Available" Severity="SbBannerSeverity.Info">
<ChildContent>
A new version is available. Would you like to update now?
</ChildContent>
<Actions>
<SbButton Variant="SbButtonVariant.Ghost" Size="SbSize.Sm">Later</SbButton>
<SbButton Size="SbSize.Sm">Update Now</SbButton>
</Actions>
</SbBanner>
```
## Methods
| Method | Return Type | Description |
|--------|-------------|-------------|
| Show() | void | Shows the banner after it has been dismissed |
## CSS Classes
- `sb-banner` - Base class
- `sb-banner--info` - Info severity
- `sb-banner--success` - Success severity
- `sb-banner--warning` - Warning severity
- `sb-banner--error` - Error severity
- `sb-banner__header` - Header row container
- `sb-banner__header-start` - Icon and title container
- `sb-banner__icon` - Icon container
- `sb-banner__title` - Title text
- `sb-banner__close` - Close button
- `sb-banner__content` - Content/message area
- `sb-banner__message` - Message text
- `sb-banner__actions` - Actions container
## Accessibility
- Uses `role="alert"` for important announcements
- Close button has `aria-label="Dismiss"`
## Examples
### Basic Banners
```razor
<SbBanner Title="Information" Message="This is an informational banner." />
<SbBanner Title="Success"
Message="Your changes have been saved."
Severity="SbBannerSeverity.Success" />
<SbBanner Title="Warning"
Message="Your session will expire in 5 minutes."
Severity="SbBannerSeverity.Warning" />
<SbBanner Title="Error"
Message="Failed to connect to the server."
Severity="SbBannerSeverity.Error" />
```
### Non-Dismissible Banner
```razor
<SbBanner Title="System Maintenance"
Message="Scheduled maintenance tonight at 10 PM."
Severity="SbBannerSeverity.Warning"
Dismissible="false" />
```
### With Custom Content and Actions
```razor
<SbBanner Title="New Feature" Severity="SbBannerSeverity.Info">
<ChildContent>
<p>We've added dark mode support! Try it out in your settings.</p>
</ChildContent>
<Actions>
<SbButton Variant="SbButtonVariant.Ghost" Size="SbSize.Sm" OnClick="Dismiss">
Maybe Later
</SbButton>
<SbButton Size="SbSize.Sm" OnClick="GoToSettings">
Go to Settings
</SbButton>
</Actions>
</SbBanner>
```
### Handling Dismiss
```razor
<SbBanner @ref="bannerRef"
Title="Welcome!"
Message="Thanks for joining us."
OnDismiss="HandleDismiss" />
<SbButton OnClick="ShowBanner">Show Banner Again</SbButton>
@code {
private SbBanner? bannerRef;
private void HandleDismiss()
{
Console.WriteLine("Banner was dismissed");
}
private void ShowBanner()
{
bannerRef?.Show();
}
}
```
docs/components/feedback/SbChip.md
+170
View File
@@ -0,0 +1,170 @@
# SbChip
A compact element for displaying tags, categories, or actionable items. Chips can be static, clickable, or removable, with support for icons and various visual styles.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Variant | SbChipVariant | Filled | Visual style (Filled, Outlined) |
| Size | SbSize | Md | Chip size (Sm, Md, Lg) |
| Color | SbColor | Default | Color theme |
| Disabled | bool | false | Whether the chip is disabled |
| Class | string? | null | Additional CSS classes |
| Style | string? | null | Inline styles |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes |
## Events
| Event | Type | Description |
|-------|------|-------------|
| OnClick | EventCallback<MouseEventArgs> | Fired when chip is clicked (makes chip interactive) |
| OnRemove | EventCallback | Fired when remove button is clicked (shows remove button) |
## Templates / Slots
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment? | Label content of the chip |
| StartIcon | RenderFragment? | Icon displayed before the label |
### Template Usage
#### Basic
```razor
<SbChip>Label</SbChip>
```
#### With Start Icon
```razor
<SbChip>
<StartIcon>
<SbIcon Name="tag" Size="SbSize.Sm" />
</StartIcon>
<ChildContent>Category</ChildContent>
</SbChip>
```
## CSS Classes
- `sb-chip` - Base class
- `sb-chip--filled` - Filled variant
- `sb-chip--outlined` - Outlined variant
- `sb-chip--sm` - Small size
- `sb-chip--md` - Medium size
- `sb-chip--lg` - Large size
- `sb-chip--primary` - Primary color
- `sb-chip--secondary` - Secondary color
- `sb-chip--success` - Success color
- `sb-chip--warning` - Warning color
- `sb-chip--danger` - Danger color
- `sb-chip--clickable` - Applied when OnClick is provided
- `sb-chip--disabled` - Disabled state
- `sb-chip__icon` - Icon container
- `sb-chip__label` - Label container
- `sb-chip__remove` - Remove button
## Accessibility
- Renders as `<button>` when clickable, `<span>` otherwise
- Remove button has `aria-label="Remove"`
- Disabled state is reflected in the DOM
## Examples
### Basic Chips
```razor
<SbChip>Default</SbChip>
<SbChip Color="SbColor.Primary">Primary</SbChip>
<SbChip Color="SbColor.Success">Success</SbChip>
<SbChip Color="SbColor.Warning">Warning</SbChip>
<SbChip Color="SbColor.Danger">Danger</SbChip>
```
### Variants
```razor
<SbChip Variant="SbChipVariant.Filled" Color="SbColor.Primary">Filled</SbChip>
<SbChip Variant="SbChipVariant.Outlined" Color="SbColor.Primary">Outlined</SbChip>
```
### Sizes
```razor
<SbChip Size="SbSize.Sm">Small</SbChip>
<SbChip Size="SbSize.Md">Medium</SbChip>
<SbChip Size="SbSize.Lg">Large</SbChip>
```
### Clickable Chip
```razor
<SbChip OnClick="HandleClick" Color="SbColor.Primary">
Click Me
</SbChip>
@code {
private void HandleClick(MouseEventArgs args)
{
Console.WriteLine("Chip clicked!");
}
}
```
### Removable Chip
```razor
<SbChip OnRemove="HandleRemove" Color="SbColor.Primary">
Removable
</SbChip>
@code {
private void HandleRemove()
{
Console.WriteLine("Chip removed!");
}
}
```
### With Icon
```razor
<SbChip Color="SbColor.Primary">
<StartIcon>
<SbIcon Name="user" Size="SbSize.Sm" />
</StartIcon>
<ChildContent>John Doe</ChildContent>
</SbChip>
```
### Tag List Example
```razor
@foreach (var tag in tags)
{
<SbChip Color="SbColor.Primary"
Variant="SbChipVariant.Outlined"
OnRemove="() => RemoveTag(tag)">
@tag
</SbChip>
}
@code {
private List<string> tags = new() { "Blazor", "C#", ".NET" };
private void RemoveTag(string tag)
{
tags.Remove(tag);
}
}
```
### Disabled State
```razor
<SbChip Disabled="true">Disabled</SbChip>
<SbChip Disabled="true" OnClick="HandleClick">Can't Click</SbChip>
```
docs/components/feedback/SbEmptyState.md
+169
View File
@@ -0,0 +1,169 @@
# SbEmptyState
Displays a placeholder when there is no content to show, such as empty lists, search results with no matches, or first-time user experiences. Provides a visual cue with optional icon, title, description, and action buttons.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| IconText | string? | "📭" | Icon text (emoji or symbol) shown when Icon is not provided |
| Title | string? | "No items found" | Main heading text |
| Description | string? | null | Secondary descriptive text |
| Class | string? | null | Additional CSS classes |
## Templates / Slots
| Slot | Type | Description |
|------|------|-------------|
| Icon | RenderFragment? | Custom icon content (takes precedence over IconText) |
| ChildContent | RenderFragment? | Additional content below the description |
| Actions | RenderFragment? | Action buttons (e.g., "Create New", "Try Again") |
### Template Usage
#### With Custom Icon
```razor
<SbEmptyState Title="No Messages">
<Icon>
<SbIcon Name="inbox" Size="SbSize.Xl" />
</Icon>
</SbEmptyState>
```
#### With Actions
```razor
<SbEmptyState Title="No Projects" Description="Get started by creating your first project.">
<Actions>
<SbButton>Create Project</SbButton>
</Actions>
</SbEmptyState>
```
#### With Custom Content
```razor
<SbEmptyState Title="Search Results">
<ChildContent>
<p>Try adjusting your search terms or filters.</p>
</ChildContent>
</SbEmptyState>
```
## CSS Classes
- `sb-empty-state` - Base class
- `sb-empty-state__icon` - Icon container
- `sb-empty-state__icon-text` - Icon text element
- `sb-empty-state__title` - Title heading
- `sb-empty-state__description` - Description paragraph
- `sb-empty-state__content` - Custom content wrapper
- `sb-empty-state__actions` - Actions container
## Examples
### Basic Empty State
```razor
<SbEmptyState />
```
### With Custom Title and Description
```razor
<SbEmptyState
Title="No notifications"
Description="You're all caught up! Check back later for new updates." />
```
### With Custom Icon Text
```razor
<SbEmptyState
IconText="🔍"
Title="No results found"
Description="Try different search terms." />
```
### With Icon Component
```razor
<SbEmptyState Title="Empty Cart" Description="Your shopping cart is empty.">
<Icon>
<SbIcon Name="shopping-cart" Size="SbSize.Xl" Class="text-muted" />
</Icon>
<Actions>
<SbButton Variant="SbButtonVariant.Primary">Start Shopping</SbButton>
</Actions>
</SbEmptyState>
```
### First-Time User Experience
```razor
<SbEmptyState
IconText="🚀"
Title="Welcome to Your Dashboard"
Description="This is where your projects will appear once you create them.">
<Actions>
<SbButton Variant="SbButtonVariant.Primary" OnClick="CreateProject">
Create Your First Project
</SbButton>
<SbButton Variant="SbButtonVariant.Ghost" OnClick="LearnMore">
Learn More
</SbButton>
</Actions>
</SbEmptyState>
```
### Error State
```razor
<SbEmptyState
IconText="⚠️"
Title="Unable to load data"
Description="Something went wrong while fetching your data.">
<Actions>
<SbButton OnClick="Retry">Try Again</SbButton>
</Actions>
</SbEmptyState>
```
### Search No Results
```razor
<SbEmptyState
IconText="🔍"
Title="No matches found"
Description="We couldn't find anything matching your search.">
<ChildContent>
<p><strong>Suggestions:</strong></p>
<ul>
<li>Check your spelling</li>
<li>Try more general terms</li>
<li>Try different keywords</li>
</ul>
</ChildContent>
<Actions>
<SbButton Variant="SbButtonVariant.Ghost" OnClick="ClearSearch">
Clear Search
</SbButton>
</Actions>
</SbEmptyState>
```
### In a Data Grid
```razor
<SbDataGrid Items="@filteredItems">
<EmptyTemplate>
<SbEmptyState
IconText="📋"
Title="No data available"
Description="Add some items to see them here." />
</EmptyTemplate>
<SbColumn Field="Name" Title="Name" />
<SbColumn Field="Status" Title="Status" />
</SbDataGrid>
```
docs/components/feedback/SbProgress.md
+165
View File
@@ -0,0 +1,165 @@
# 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;
}
```
docs/components/feedback/SbSkeleton.md
+173
View File
@@ -0,0 +1,173 @@
# SbSkeleton
A placeholder component that shows a preview of content while data is loading. Reduces perceived loading time by providing visual structure that mimics the final content layout.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Variant | SbSkeletonVariant | Text | Shape variant (Text, Circular, Rectangular) |
| Animation | bool | true | Whether to show the shimmer animation |
| Width | string? | null | CSS width value (e.g., "100%", "200px") |
| Height | string? | null | CSS height value (e.g., "20px", "100px") |
| BorderRadius | string? | null | CSS border-radius value (e.g., "8px", "50%") |
| Class | string? | null | Additional CSS classes |
## CSS Classes
- `sb-skeleton` - Base class
- `sb-skeleton--text` - Text variant (short height, full width)
- `sb-skeleton--circular` - Circular variant (circle shape)
- `sb-skeleton--rectangular` - Rectangular variant (block shape)
- `sb-skeleton--animated` - Shimmer animation applied
## Accessibility
- Uses `aria-hidden="true"` since it's a decorative placeholder
## Examples
### Basic Variants
```razor
@* Text skeleton - simulates a line of text *@
<SbSkeleton Variant="SbSkeletonVariant.Text" />
@* Circular skeleton - simulates an avatar *@
<SbSkeleton Variant="SbSkeletonVariant.Circular" Width="40px" Height="40px" />
@* Rectangular skeleton - simulates an image or card *@
<SbSkeleton Variant="SbSkeletonVariant.Rectangular" Height="200px" />
```
### Custom Dimensions
```razor
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="60%" />
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="80%" />
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="40%" />
```
### Without Animation
```razor
<SbSkeleton Variant="SbSkeletonVariant.Rectangular"
Height="100px"
Animation="false" />
```
### Custom Border Radius
```razor
<SbSkeleton Variant="SbSkeletonVariant.Rectangular"
Height="150px"
BorderRadius="16px" />
```
### Card Skeleton
```razor
<div class="card-skeleton">
@* Image placeholder *@
<SbSkeleton Variant="SbSkeletonVariant.Rectangular" Height="200px" />
<div style="padding: 16px;">
@* Title *@
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="80%" Height="24px" />
@* Subtitle *@
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="60%" />
@* Description lines *@
<div style="margin-top: 16px;">
<SbSkeleton Variant="SbSkeletonVariant.Text" />
<SbSkeleton Variant="SbSkeletonVariant.Text" />
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="70%" />
</div>
</div>
</div>
```
### List Item Skeleton
```razor
@for (int i = 0; i < 5; i++)
{
<div class="list-item-skeleton" style="display: flex; gap: 16px; padding: 12px;">
@* Avatar *@
<SbSkeleton Variant="SbSkeletonVariant.Circular" Width="48px" Height="48px" />
<div style="flex: 1;">
@* Name *@
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="40%" Height="20px" />
@* Description *@
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="70%" />
</div>
</div>
}
```
### Data Table Skeleton
```razor
<div class="table-skeleton">
@* Header *@
<div style="display: flex; gap: 16px; padding: 12px; border-bottom: 1px solid #eee;">
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="20%" />
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="30%" />
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="25%" />
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="15%" />
</div>
@* Rows *@
@for (int i = 0; i < 5; i++)
{
<div style="display: flex; gap: 16px; padding: 12px;">
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="20%" />
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="30%" />
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="25%" />
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="15%" />
</div>
}
</div>
```
### Profile Page Skeleton
```razor
<div class="profile-skeleton">
@* Cover image *@
<SbSkeleton Variant="SbSkeletonVariant.Rectangular" Height="200px" />
<div style="padding: 20px; margin-top: -60px;">
@* Avatar *@
<SbSkeleton Variant="SbSkeletonVariant.Circular"
Width="120px"
Height="120px"
Style="border: 4px solid white;" />
@* Name and bio *@
<div style="margin-top: 16px;">
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="200px" Height="28px" />
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="150px" />
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="300px" />
</div>
</div>
</div>
```
### Conditional Loading
```razor
@if (isLoading)
{
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="60%" />
<SbSkeleton Variant="SbSkeletonVariant.Text" />
<SbSkeleton Variant="SbSkeletonVariant.Text" Width="80%" />
}
else
{
<h2>@article.Title</h2>
<p>@article.Content</p>
}
```
docs/components/feedback/SbStatusPill.md
+157
View File
@@ -0,0 +1,157 @@
# SbStatusPill
A compact indicator showing the status of an item with a colored dot and label. Useful for displaying states like Active, Pending, Error, or custom statuses in lists, tables, and cards.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Status | SbStatusType | Default | Status type affecting color (Default, Success, Warning, Error, Info) |
| Label | string? | null | Custom label text (overrides default status label) |
| ShowDot | bool | true | Whether to show the status dot indicator |
| Pulsing | bool | false | Whether to show a pulsing animation on the dot |
| Class | string? | null | Additional CSS classes |
## Status Types and Default Labels
| Status | Default Label | Color |
|--------|---------------|-------|
| Default | "Unknown" | Gray |
| Success | "Active" | Green |
| Warning | "Pending" | Yellow/Orange |
| Error | "Error" | Red |
| Info | "Info" | Blue |
## CSS Classes
- `sb-status-pill` - Base class
- `sb-status-pill--default` - Default status
- `sb-status-pill--success` - Success status
- `sb-status-pill--warning` - Warning status
- `sb-status-pill--error` - Error status
- `sb-status-pill--info` - Info status
- `sb-status-pill--pulsing` - Pulsing animation
- `sb-status-pill__dot` - Status dot indicator
- `sb-status-pill__label` - Label text
## Examples
### Basic Status Pills
```razor
<SbStatusPill Status="SbStatusType.Success" />
<SbStatusPill Status="SbStatusType.Warning" />
<SbStatusPill Status="SbStatusType.Error" />
<SbStatusPill Status="SbStatusType.Info" />
<SbStatusPill Status="SbStatusType.Default" />
```
### Custom Labels
```razor
<SbStatusPill Status="SbStatusType.Success" Label="Online" />
<SbStatusPill Status="SbStatusType.Warning" Label="Away" />
<SbStatusPill Status="SbStatusType.Error" Label="Offline" />
<SbStatusPill Status="SbStatusType.Info" Label="Busy" />
```
### Without Dot
```razor
<SbStatusPill Status="SbStatusType.Success" Label="Completed" ShowDot="false" />
<SbStatusPill Status="SbStatusType.Warning" Label="In Progress" ShowDot="false" />
```
### Pulsing Animation
```razor
<SbStatusPill Status="SbStatusType.Success" Label="Live" Pulsing="true" />
<SbStatusPill Status="SbStatusType.Warning" Label="Processing" Pulsing="true" />
```
### In a Table
```razor
<SbTable Items="@orders">
<SbColumn Field="OrderId" Title="Order #" />
<SbColumn Field="Customer" Title="Customer" />
<SbColumn Field="Status" Title="Status">
<CellTemplate Context="cell">
<SbStatusPill Status="@GetStatusType(cell.Item.Status)"
Label="@cell.Item.Status" />
</CellTemplate>
</SbColumn>
</SbTable>
@code {
private SbStatusType GetStatusType(string status) => status switch
{
"Completed" => SbStatusType.Success,
"Processing" => SbStatusType.Warning,
"Cancelled" => SbStatusType.Error,
"Shipped" => SbStatusType.Info,
_ => SbStatusType.Default
};
}
```
### User Status Indicator
```razor
<div class="user-item">
<img src="@user.Avatar" alt="@user.Name" />
<span>@user.Name</span>
<SbStatusPill Status="@GetUserStatus(user)"
Pulsing="@(user.IsOnline)" />
</div>
@code {
private SbStatusType GetUserStatus(User user)
{
if (user.IsOnline) return SbStatusType.Success;
if (user.LastSeen > DateTime.UtcNow.AddMinutes(-30)) return SbStatusType.Warning;
return SbStatusType.Default;
}
}
```
### Task Status
```razor
@foreach (var task in tasks)
{
<div class="task-item">
<span>@task.Title</span>
<SbStatusPill Status="@GetTaskStatus(task.State)"
Label="@task.State.ToString()" />
</div>
}
@code {
private SbStatusType GetTaskStatus(TaskState state) => state switch
{
TaskState.Done => SbStatusType.Success,
TaskState.InProgress => SbStatusType.Warning,
TaskState.Blocked => SbStatusType.Error,
TaskState.Review => SbStatusType.Info,
_ => SbStatusType.Default
};
}
```
### Server Health Dashboard
```razor
<div class="server-list">
@foreach (var server in servers)
{
<div class="server-item">
<SbIcon Name="server" />
<span>@server.Name</span>
<SbStatusPill Status="@(server.IsHealthy ? SbStatusType.Success : SbStatusType.Error)"
Label="@(server.IsHealthy ? "Healthy" : "Down")"
Pulsing="@(!server.IsHealthy)" />
</div>
}
</div>
```
docs/components/feedback/SbToast.md
+128
View File
@@ -0,0 +1,128 @@
# SbToast
A temporary notification message that appears briefly to provide feedback about an operation. Toasts auto-dismiss and can show various severity levels. Typically used via SbToastHost for proper positioning and management.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Title | string? | null | Toast title/heading |
| Message | string? | null | Toast message text (used when ChildContent is not provided) |
| Severity | SbToastSeverity | Info | Toast severity (Info, Success, Warning, Error) |
| ShowCloseButton | bool | true | Whether to show the close button |
| Class | string? | null | Additional CSS classes |
## Events
| Event | Type | Description |
|-------|------|-------------|
| OnClose | EventCallback | Fired when the toast is closed |
## Templates / Slots
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment? | Custom content (takes precedence over Message) |
### Template Usage
```razor
<SbToast Title="Success" Severity="SbToastSeverity.Success">
<p>Your profile has been updated.</p>
<a href="/profile">View Profile</a>
</SbToast>
```
## CSS Classes
- `sb-toast` - Base class
- `sb-toast--info` - Info severity
- `sb-toast--success` - Success severity
- `sb-toast--warning` - Warning severity
- `sb-toast--error` - Error severity
- `sb-toast__icon` - Icon container
- `sb-toast__content` - Content wrapper
- `sb-toast__title` - Title text
- `sb-toast__message` - Message text
- `sb-toast__close` - Close button
## Accessibility
- Uses `role="alert"` for important notifications
- Uses `aria-live="polite"` for non-intrusive announcements
- Close button has `aria-label="Close"`
## Examples
### Basic Toast (Standalone)
```razor
<SbToast Severity="SbToastSeverity.Info" Message="This is an info toast." />
<SbToast Severity="SbToastSeverity.Success" Message="Operation successful!" />
<SbToast Severity="SbToastSeverity.Warning" Message="Please review your input." />
<SbToast Severity="SbToastSeverity.Error" Message="An error occurred." />
```
### With Title
```razor
<SbToast Title="Success"
Message="Your changes have been saved."
Severity="SbToastSeverity.Success" />
```
### With Custom Content
```razor
<SbToast Title="New Message" Severity="SbToastSeverity.Info">
<p>You have a new message from <strong>John</strong>.</p>
<SbButton Size="SbSize.Sm" Variant="SbButtonVariant.Ghost">View</SbButton>
</SbToast>
```
### Without Close Button
```razor
<SbToast Message="Auto-saving..."
Severity="SbToastSeverity.Info"
ShowCloseButton="false" />
```
### Handling Close
```razor
<SbToast Title="Notification"
Message="Click to dismiss"
Severity="SbToastSeverity.Info"
OnClose="HandleClose" />
@code {
private void HandleClose()
{
Console.WriteLine("Toast closed");
}
}
```
## Recommended Usage with SbToastHost
For proper toast management (positioning, stacking, auto-dismiss), use `SbToastHost`:
```razor
@* In your layout or main component *@
<SbToastHost @ref="toastHost" Position="SbToastPosition.TopRight" />
@* Trigger toasts from your component *@
<SbButton OnClick="ShowSuccessToast">Show Success</SbButton>
@code {
private SbToastHost? toastHost;
private async Task ShowSuccessToast()
{
await toastHost!.ShowSuccessAsync("Operation completed!", "Success");
}
}
```
See `SbToastHost` documentation for full details on toast management.
docs/components/feedback/SbToastHost.md
+259
View File
@@ -0,0 +1,259 @@
# SbToastHost
A container component that manages and displays toast notifications. Handles positioning, stacking, auto-dismissal, and animations for multiple toasts. Place one instance in your layout to enable toast notifications throughout your application.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Position | SbToastPosition | TopRight | Position of the toast container |
| DefaultDuration | int | 5000 | Default auto-dismiss duration in milliseconds |
| MaxToasts | int | 5 | Maximum number of toasts to display simultaneously |
| Class | string? | null | Additional CSS classes |
## Position Options
| Value | Description |
|-------|-------------|
| TopLeft | Top-left corner |
| TopCenter | Top-center |
| TopRight | Top-right corner (default) |
| BottomLeft | Bottom-left corner |
| BottomCenter | Bottom-center |
| BottomRight | Bottom-right corner |
## Methods
| Method | Parameters | Description |
|--------|------------|-------------|
| ShowAsync | message, severity?, title?, duration? | Shows a toast with specified options |
| ShowInfoAsync | message, title? | Shows an info toast |
| ShowSuccessAsync | message, title? | Shows a success toast |
| ShowWarningAsync | message, title? | Shows a warning toast |
| ShowErrorAsync | message, title? | Shows an error toast |
| Clear | - | Removes all active toasts |
## CSS Classes
- `sb-toast-host` - Base class
- `sb-toast-host--top-left` - Top-left position
- `sb-toast-host--top-center` - Top-center position
- `sb-toast-host--top-right` - Top-right position
- `sb-toast-host--bottom-left` - Bottom-left position
- `sb-toast-host--bottom-center` - Bottom-center position
- `sb-toast-host--bottom-right` - Bottom-right position
- `sb-toast-host__item` - Individual toast wrapper
- `sb-toast-host__item--entering` - Toast entering animation
- `sb-toast-host__item--leaving` - Toast leaving animation
## Examples
### Basic Setup
Place the toast host in your main layout (e.g., `MainLayout.razor`):
```razor
@inherits LayoutComponentBase
<div class="page">
<SbToastHost @ref="ToastHost" Position="SbToastPosition.TopRight" />
@Body
</div>
@code {
public SbToastHost? ToastHost { get; set; }
}
```
### Show Different Toast Types
```razor
<SbButton OnClick="ShowInfo">Info</SbButton>
<SbButton OnClick="ShowSuccess">Success</SbButton>
<SbButton OnClick="ShowWarning">Warning</SbButton>
<SbButton OnClick="ShowError">Error</SbButton>
@code {
[CascadingParameter]
public MainLayout? Layout { get; set; }
private SbToastHost? ToastHost => Layout?.ToastHost;
private async Task ShowInfo()
{
await ToastHost!.ShowInfoAsync("This is an informational message.");
}
private async Task ShowSuccess()
{
await ToastHost!.ShowSuccessAsync("Operation completed successfully!", "Success");
}
private async Task ShowWarning()
{
await ToastHost!.ShowWarningAsync("Please review your changes.", "Warning");
}
private async Task ShowError()
{
await ToastHost!.ShowErrorAsync("An error occurred. Please try again.", "Error");
}
}
```
### Custom Duration
```razor
@* Toast that stays for 10 seconds *@
await ToastHost.ShowAsync(
"This toast will stay longer.",
SbToastSeverity.Info,
"Notice",
duration: 10000
);
@* Toast that doesn't auto-dismiss (duration = 0) *@
await ToastHost.ShowAsync(
"This toast won't auto-dismiss.",
SbToastSeverity.Warning,
"Manual Close Required",
duration: 0
);
```
### Different Positions
```razor
@* Top-left *@
<SbToastHost Position="SbToastPosition.TopLeft" />
@* Bottom-center *@
<SbToastHost Position="SbToastPosition.BottomCenter" />
@* Bottom-right *@
<SbToastHost Position="SbToastPosition.BottomRight" />
```
### Configuration Options
```razor
<SbToastHost @ref="toastHost"
Position="SbToastPosition.TopRight"
DefaultDuration="3000"
MaxToasts="3" />
```
### Using with a Toast Service
For a more scalable approach, create a toast service:
```csharp
// IToastService.cs
public interface IToastService
{
event Func<string, SbToastSeverity, string?, int?, Task>? OnShow;
Task ShowAsync(string message, SbToastSeverity severity = SbToastSeverity.Info,
string? title = null, int? duration = null);
Task ShowInfoAsync(string message, string? title = null);
Task ShowSuccessAsync(string message, string? title = null);
Task ShowWarningAsync(string message, string? title = null);
Task ShowErrorAsync(string message, string? title = null);
}
// ToastService.cs
public class ToastService : IToastService
{
public event Func<string, SbToastSeverity, string?, int?, Task>? OnShow;
public Task ShowAsync(string message, SbToastSeverity severity = SbToastSeverity.Info,
string? title = null, int? duration = null)
=> OnShow?.Invoke(message, severity, title, duration) ?? Task.CompletedTask;
public Task ShowInfoAsync(string message, string? title = null)
=> ShowAsync(message, SbToastSeverity.Info, title);
public Task ShowSuccessAsync(string message, string? title = null)
=> ShowAsync(message, SbToastSeverity.Success, title);
public Task ShowWarningAsync(string message, string? title = null)
=> ShowAsync(message, SbToastSeverity.Warning, title);
public Task ShowErrorAsync(string message, string? title = null)
=> ShowAsync(message, SbToastSeverity.Error, title);
}
```
Register in DI:
```csharp
builder.Services.AddScoped<IToastService, ToastService>();
```
Connect in layout:
```razor
@inject IToastService ToastService
<SbToastHost @ref="toastHost" />
@code {
private SbToastHost? toastHost;
protected override void OnInitialized()
{
ToastService.OnShow += async (msg, sev, title, dur) =>
{
await toastHost!.ShowAsync(msg, sev, title, dur);
};
}
}
```
Use anywhere:
```razor
@inject IToastService ToastService
<SbButton OnClick="SaveData">Save</SbButton>
@code {
private async Task SaveData()
{
// ... save logic ...
await ToastService.ShowSuccessAsync("Data saved successfully!");
}
}
```
### Clear All Toasts
```razor
<SbButton OnClick="() => toastHost?.Clear()">Clear All Toasts</SbButton>
```
### Form Submission Example
```razor
<SbForm OnValidSubmit="HandleSubmit">
<SbTextField @bind-Value="name" Label="Name" Required="true" />
<SbButton Type="submit">Submit</SbButton>
</SbForm>
@code {
private string name = "";
private async Task HandleSubmit()
{
try
{
await SaveAsync();
await ToastHost!.ShowSuccessAsync("Form submitted successfully!");
}
catch (Exception ex)
{
await ToastHost!.ShowErrorAsync($"Error: {ex.Message}", "Submission Failed");
}
}
}
```