first commit

2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
@@ -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" />
+```