first commit
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
# SbTabs
|
||||
|
||||
A tabbed navigation component for switching between different content panels.
|
||||
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| ActiveIndex | int | 0 | The active tab index (0-based) |
|
||||
| ActiveTab | string? | null | The active tab ID (string-based selection) |
|
||||
| LazyLoad | bool | false | Whether to lazy-load tab content |
|
||||
| Vertical | bool | false | When true, tabs are vertical (side-by-side with content) |
|
||||
| Class | string? | null | Additional CSS classes |
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Type | Description |
|
||||
|-------|------|-------------|
|
||||
| ActiveIndexChanged | EventCallback\<int\> | Fired when active tab index changes |
|
||||
| ActiveTabChanged | EventCallback\<string?\> | Fired when active tab ID changes |
|
||||
|
||||
## Templates / Slots
|
||||
|
||||
| Slot | Type | Description |
|
||||
|------|------|-------------|
|
||||
| ChildContent | RenderFragment | Tab content (SbTab components) |
|
||||
|
||||
## CSS Classes
|
||||
|
||||
- `sb-tabs` - Base class
|
||||
- `sb-tabs--vertical` - Vertical layout (tabs on side, content adjacent). Applied when `Vertical="true"`.
|
||||
- `sb-tabs__list` - Tab list container
|
||||
- `sb-tabs__tab` - Individual tab button
|
||||
- `sb-tabs__tab--active` - Active tab
|
||||
- `sb-tabs__tab--disabled` - Disabled tab
|
||||
- `sb-tabs__tab-icon` - Tab icon
|
||||
- `sb-tabs__tab-label` - Tab label text
|
||||
- `sb-tabs__tab-badge` - Tab badge
|
||||
- `sb-tabs__content` - Content container
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Uses `role="tablist"` and `role="tab"` for tab buttons
|
||||
- Uses `role="tabpanel"` for content panels
|
||||
- Supports `aria-selected`, `aria-controls`, and `hidden` attributes
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```razor
|
||||
<SbTabs>
|
||||
<SbTab Label="General">
|
||||
<p>General settings content</p>
|
||||
</SbTab>
|
||||
<SbTab Label="Security">
|
||||
<p>Security settings content</p>
|
||||
</SbTab>
|
||||
<SbTab Label="Notifications">
|
||||
<p>Notification settings content</p>
|
||||
</SbTab>
|
||||
</SbTabs>
|
||||
```
|
||||
|
||||
### With Icons
|
||||
|
||||
```razor
|
||||
<SbTabs>
|
||||
<SbTab Label="Home">
|
||||
<Icon><SbIcon Name="home" /></Icon>
|
||||
<ChildContent>Home content</ChildContent>
|
||||
</SbTab>
|
||||
<SbTab Label="Profile">
|
||||
<Icon><SbIcon Name="user" /></Icon>
|
||||
<ChildContent>Profile content</ChildContent>
|
||||
</SbTab>
|
||||
<SbTab Label="Settings">
|
||||
<Icon><SbIcon Name="settings" /></Icon>
|
||||
<ChildContent>Settings content</ChildContent>
|
||||
</SbTab>
|
||||
</SbTabs>
|
||||
```
|
||||
|
||||
### With Badges
|
||||
|
||||
```razor
|
||||
<SbTabs>
|
||||
<SbTab Label="Inbox">
|
||||
<Badge><SbBadge Value="5" /></Badge>
|
||||
<ChildContent>Inbox messages</ChildContent>
|
||||
</SbTab>
|
||||
<SbTab Label="Sent">
|
||||
<ChildContent>Sent messages</ChildContent>
|
||||
</SbTab>
|
||||
<SbTab Label="Drafts">
|
||||
<Badge><SbBadge Value="2" /></Badge>
|
||||
<ChildContent>Draft messages</ChildContent>
|
||||
</SbTab>
|
||||
</SbTabs>
|
||||
```
|
||||
|
||||
### Controlled Tabs (Index-based)
|
||||
|
||||
```razor
|
||||
<SbTabs @bind-ActiveIndex="activeTab">
|
||||
<SbTab Label="Tab 1">Content 1</SbTab>
|
||||
<SbTab Label="Tab 2">Content 2</SbTab>
|
||||
<SbTab Label="Tab 3">Content 3</SbTab>
|
||||
</SbTabs>
|
||||
|
||||
@code {
|
||||
private int activeTab = 0;
|
||||
}
|
||||
```
|
||||
|
||||
### Controlled Tabs (ID-based)
|
||||
|
||||
```razor
|
||||
<SbTabs @bind-ActiveTab="activeTabId">
|
||||
<SbTab Id="general" Label="General">General content</SbTab>
|
||||
<SbTab Id="advanced" Label="Advanced">Advanced content</SbTab>
|
||||
<SbTab Id="about" Label="About">About content</SbTab>
|
||||
</SbTabs>
|
||||
|
||||
@code {
|
||||
private string? activeTabId = "general";
|
||||
}
|
||||
```
|
||||
|
||||
### Vertical Tabs (sidebar layout)
|
||||
|
||||
```razor
|
||||
<SbTabs Vertical="true" @bind-ActiveTab="activeTabId">
|
||||
<SbTab Id="general" Label="General">General settings</SbTab>
|
||||
<SbTab Id="security" Label="Security">Security settings</SbTab>
|
||||
</SbTabs>
|
||||
```
|
||||
|
||||
### With Disabled Tab
|
||||
|
||||
```razor
|
||||
<SbTabs>
|
||||
<SbTab Label="Active">Active tab content</SbTab>
|
||||
<SbTab Label="Another">Another tab content</SbTab>
|
||||
<SbTab Label="Disabled" Disabled="true">
|
||||
This content is inaccessible
|
||||
</SbTab>
|
||||
</SbTabs>
|
||||
```
|
||||
|
||||
### Lazy Loading
|
||||
|
||||
```razor
|
||||
<SbTabs LazyLoad="true">
|
||||
<SbTab Label="Basic">
|
||||
<p>Basic info (loaded immediately)</p>
|
||||
</SbTab>
|
||||
<SbTab Label="Heavy Content">
|
||||
@* This content is only rendered when tab is first activated *@
|
||||
<ExpensiveComponent />
|
||||
</SbTab>
|
||||
</SbTabs>
|
||||
```
|
||||
|
||||
### Settings Page Layout
|
||||
|
||||
```razor
|
||||
<SbCard>
|
||||
<SbTabs>
|
||||
<SbTab Label="Profile">
|
||||
<SbStack Gap="4" Class="p-4">
|
||||
<SbTextField Label="Name" @bind-Value="name" />
|
||||
<SbTextField Label="Email" @bind-Value="email" />
|
||||
<SbButton>Save Profile</SbButton>
|
||||
</SbStack>
|
||||
</SbTab>
|
||||
<SbTab Label="Password">
|
||||
<SbStack Gap="4" Class="p-4">
|
||||
<SbTextField Label="Current Password" Type="password" />
|
||||
<SbTextField Label="New Password" Type="password" />
|
||||
<SbTextField Label="Confirm Password" Type="password" />
|
||||
<SbButton>Update Password</SbButton>
|
||||
</SbStack>
|
||||
</SbTab>
|
||||
<SbTab Label="Preferences">
|
||||
<SbStack Gap="4" Class="p-4">
|
||||
<SbSwitch Label="Dark Mode" @bind-Value="darkMode" />
|
||||
<SbSwitch Label="Email Notifications" @bind-Value="emailNotifications" />
|
||||
<SbButton>Save Preferences</SbButton>
|
||||
</SbStack>
|
||||
</SbTab>
|
||||
</SbTabs>
|
||||
</SbCard>
|
||||
```
|
||||
Reference in New Issue
Block a user