first commit

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