first commit

2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
@@ -0,0 +1,164 @@
+# SbTab
+
+A single tab panel component used within SbTabs.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| Id | string? | null | Unique identifier for ID-based tab selection |
+| Label | string | "" | Tab label text displayed in the tab button |
+| Disabled | bool | false | Whether the tab is disabled |
+
+## Templates / Slots
+
+| Slot | Type | Description |
+|------|------|-------------|
+| Icon | RenderFragment | Icon content displayed in the tab button |
+| Badge | RenderFragment | Badge content displayed in the tab button |
+| ChildContent | RenderFragment | Tab panel content |
+
+## Cascading Parameters
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| Parent | SbTabs | Parent tabs container |
+
+## CSS Classes
+
+- `sb-tab-panel` - Base class for panel
+- `sb-tab-panel--active` - When panel is active
+- `sb-tabs__panel` - Tabs panel container class
+
+## Examples
+
+### Basic Usage
+
+```razor
+<SbTabs>
+    <SbTab Label="First Tab">
+        <p>Content for the first tab</p>
+    </SbTab>
+    <SbTab Label="Second Tab">
+        <p>Content for the second tab</p>
+    </SbTab>
+</SbTabs>
+```
+
+### With ID for Controlled Selection
+
+```razor
+<SbTabs @bind-ActiveTab="activeTabId">
+    <SbTab Id="overview" Label="Overview">
+        Overview content
+    </SbTab>
+    <SbTab Id="details" Label="Details">
+        Details content
+    </SbTab>
+    <SbTab Id="history" Label="History">
+        History content
+    </SbTab>
+</SbTabs>
+
+@code {
+    private string? activeTabId = "overview";
+    
+    private void GoToHistory() => activeTabId = "history";
+}
+```
+
+### With Icon
+
+```razor
+<SbTab Label="Settings">
+    <Icon>
+        <SbIcon Name="settings" Size="SbSize.Sm" />
+    </Icon>
+    <ChildContent>
+        <p>Settings content goes here</p>
+    </ChildContent>
+</SbTab>
+```
+
+### With Badge
+
+```razor
+<SbTab Label="Messages">
+    <Badge>
+        <SbBadge Value="3" Color="SbColor.Primary" />
+    </Badge>
+    <ChildContent>
+        <p>You have 3 new messages</p>
+    </ChildContent>
+</SbTab>
+```
+
+### Icon and Badge Combined
+
+```razor
+<SbTab Label="Notifications">
+    <Icon>
+        <SbIcon Name="bell" Size="SbSize.Sm" />
+    </Icon>
+    <Badge>
+        <SbBadge Value="12" Color="SbColor.Danger" />
+    </Badge>
+    <ChildContent>
+        <ul>
+            @foreach (var notification in notifications)
+            {
+                <li>@notification.Message</li>
+            }
+        </ul>
+    </ChildContent>
+</SbTab>
+```
+
+### Disabled Tab
+
+```razor
+<SbTabs>
+    <SbTab Label="Available">
+        This tab is available
+    </SbTab>
+    <SbTab Label="Premium" Disabled="@(!isPremiumUser)">
+        Premium content - upgrade to access
+    </SbTab>
+</SbTabs>
+
+@code {
+    private bool isPremiumUser = false;
+}
+```
+
+### Complex Tab Content
+
+```razor
+<SbTabs>
+    <SbTab Label="Users">
+        <SbStack Gap="4">
+            <SbStack Direction="SbStackDirection.Row" Justify="SbJustify.SpaceBetween">
+                <SbHeading Level="3">Users List</SbHeading>
+                <SbButton>Add User</SbButton>
+            </SbStack>
+            <SbDataGrid Items="@users">
+                <SbColumn Field="Name" Title="Name" />
+                <SbColumn Field="Email" Title="Email" />
+                <SbColumn Field="Role" Title="Role" />
+            </SbDataGrid>
+        </SbStack>
+    </SbTab>
+    <SbTab Label="Roles">
+        <SbStack Gap="4">
+            <SbHeading Level="3">Role Management</SbHeading>
+            @foreach (var role in roles)
+            {
+                <SbCard>
+                    <strong>@role.Name</strong>
+                    <p>@role.Description</p>
+                </SbCard>
+            }
+        </SbStack>
+    </SbTab>
+</SbTabs>
+```