165 lines
3.6 KiB
Markdown
165 lines
3.6 KiB
Markdown
# 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>
|
|
```
|